gpt4 book ai didi

html - css 相对定位在 chrome 中不起作用

转载 作者:太空狗 更新时间:2023-10-29 13:27:16 25 4
gpt4 key购买 nike

我在 Google Chrome 中遇到相对定位问题以下代码在 IE 中运行良好,但在 Chrome 中运行不正常。相对定位是相对于元素的正常位置。红框的正常位置是在黑框的正下方。如果我添加 10% 的空间,红色框应该出现在正常位置下方 10%。

jsfiddle

HTML

 <body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body

CSS

 #outer
{
position:absolute;
left:20%;
right:20%;
bottom:20%;
top:20%;
background-color:Blue;
}

#inner1
{
position:relative;
width:20%;
height:20%;
background-color:Black;
}

#inner2
{
position:relative;
top:10%;
width:20%;
height:20%;
background-color:Red;
}

最佳答案

为了使相对定位起作用,父级应该有一个尺寸:

width: 100%;
height: 100%;

check the result in this fiddle

关于html - css 相对定位在 chrome 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20702307/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com