瀏覽器調整大小的位置元素絕對位移

當我重新調整瀏覽器大小時，位置設置爲絕對的元素不會根據其他元素髮生更改。如果我把絕對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

瀏覽器調整大小的位置元素絕對位移

回答

相關問題