0

当我重新调整浏览器的大小时，位置设置为绝对的元素不会根据其他元素而改变。如果我将绝对 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;
}
4

4 回答 4

1

习惯了这个 

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

</div>

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

现场演示

更多关于职位

于 2013-04-09T08:46:38.537 回答
1

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

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

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

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

查看代码 - 您已设置outer高度为auto并且blackbox高度为100%。所以父母的身高以孩子的身高为准，孩子的身高以父母的身高为准！所以他们崩溃到0px。这就是为什么你没有看到blackbox。试着#outer {height: 1250px;}看东西...

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

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

于 2013-04-09T08:52:11.467 回答
0

您的 CSS 中有错字。从 更改#blackbox为.blackbox

于 2013-04-09T08:50:22.053 回答
0 
<div id="outer">
 <div class="blackbox"></div>
 <div class="form"></div> 
</div>

#blackbox -> wrong

使用 .blackbox { }

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

于 2013-04-09T08:55:53.140 回答