Question

当我重新调整浏览器大小时，其位置设置为绝对值的元素不会根据其他元素而改变。如果我将绝对div放在相对内部，则不显示黑盒子。

<div id="outer"></div>
<div id="blackbox"></div>
<div class="form"></div> 

#outer{
    width:1250px;
    height:auto;
    margin:auto;
    position:relative;
}
#blackbox{
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    position:absolute;
    z-index:10;
    left:0;
    top:0;
}
.form{
    width:500px;
    height:350px;
    z-index:20;
    background:#FFF;
    position:absolute;
    top:100;
    left:400;
}

Answer 1

用于此

<div id="outer">
<div class="blackbox"></div>
<div class="form"></div> 

</div>

定义为父div position relative和子div position absolute

<强> Live Demo

<强> More about Position

Answer 2

绝对和相对定位是相对于“包含块”

绝对块相对于它们的“包含块”放置。他们为孩子定义了一个新的“包含块”。

相对于其流入位置放置相对块。他们还为孩子定义了一个新的“包含块”。

因此，当你在一个相对块Y中放置一个绝对块X时，你会说“将Y放在页面流中，将它移动一点然后将X相对于Y的新位置固定”。

查看代码 - 您已将outer设置为auto和blackbox，其高度为100%。因此，父母的身高取决于孩子的身高，而孩子的身高则取决于孩子的身高！所以他们崩溃到0px。这就是为什么你没有看到blackbox。 Try #outer {height: 1250px;} to see things...

希望有帮助，如果没有，那么阅读规范 - 这始终是所有这些问题的最终答案（这是我学习CSS的方式）！

http://www.w3.org/TR/CSS2/visuren.html

Answer 3

你的CSS中有拼写错误。从#blackbox更改为.blackbox

Answer 4

<div id="outer">
 <div class="blackbox"></div>
 <div class="form"></div> 
</div>

#blackbox -> wrong

使用.blackbox {}

还要记住，绝对定位元素必须始终位于相对定位元素

内

位置元素绝对改变浏览器调整大小

4 个答案: