浏览器调整大小的位置元素绝对位移

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

来源

2013-04-09 Pia Arora

习惯了这种

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

</div>

定义到父DIVposition relative和孩子DIVposition absolute

Live Demo

More about Position

来源

2013-04-09 08:46:38

内，但是当我做到这一点唯一形式被示出，它不列入显示that blackbox – 2013-04-09 08:48:43

您的CSS一个错字。变化从#blackbox到.blackbox

来源

2013-04-09 08:50:22 Johan

绝对和相对定位是相对于

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

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

因此，当您将绝对块X放置在相对块Y中时，您会说“将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

来源

2013-04-09 08:52:11

Nice expalaination – Sami 2013-04-09 09:12:17

thanks很多..问题解决.. :) – 2013-04-09 12:00:51

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

#blackbox -> wrong

使用.blackbox {}

还记得，绝对定位的元素必须始终是相对定位的元素

来源

2013-04-09 08:55:53

在这里，我错误地写了class =“blackbox”，在原来的代码中我使用了id =“blackbox”，但是pro瑕疵是，当我把它放在相对的一个里面时，黑盒不显示 – 2013-04-10 11:23:36

浏览器调整大小的位置元素绝对位移

回答

相关问题