CSS：適合相對定位的父，以絕對定位的孩子

的高度，我想建立一個簡單的幻燈片。到目前爲止，基本標記看起來是這樣的：CSS：適合相對定位的父，以絕對定位的孩子

<h1>My Slideshow</h1> 

<p>This paragraph behaves as expected.</p> 

<div class="slide-container"> 
    <div class="slide"> 
    <h2>First Slide</h2> 
    <p>Some stuff on this slide…</p> 
    </div> 

    <div class="slide"> 
    <h2>Second Slide</h2> 
    <p>And some more stuff here…</p> 
    </div> 
</div> 

<p>This paragraph will disappear beneath the stacked images.</p>

這是對應的CSS：

.slide-container { 
    position: relative; 
} 

.slide { 
    position: absolute; 
    top: 0; 

    /* just for the looks */ 
    width: 20em; 
    padding: 0 1em; 
    border: 1px solid steelblue; 
    background: white; 
}

的問題是，該.slide-container不適合其子女（或子女）的高度（見截圖）。

enter image description here

我知道我可以手動設置.slide-container的高度，但我想把這個流體中的網格，其中高度是可變的。有什麼辦法可以做到這一點？

來源

2011-12-20 Patrick Oscity

不幸的是，絕對定位的元素只是：絕對定位，你告訴瀏覽器把它。這種定位將元素從文檔流中移除。 – Stephen 2011-12-20 14:40:32

所以我想手動設置高度將是唯一的解決方案，我是嗎？ – 2011-12-20 14:42:58

或有另一種方式堆疊在彼此的頂部上的'.slide's，而不使用'位置：絕對;'？ – 2011-12-20 14:44:02

絕對定位的項目與父母邏輯關聯，但不是「物理」。他們不是佈局的一部分，所以父母不能真正看到他們有多大。您需要自己編寫大小，或者使用JavaScript嗅探它並在運行時進行設置。

來源

2011-12-20 14:57:33

您可以使用此使用jQuery：

function sliderheight(){ 
     divHeight = $('.slide').height(); 
     $('.slide-container').css({'height' : divHeight}); 
    } 
    sliderheight();

這將調整「滑容器」 DIV有相同的高度「滑」 DIV。

你可以把它響應通過調用一個「調整大小」事件觸發的功能：

$(window).resize(sliderheight);

希望這有助於。這樣做的

來源

2015-03-30 14:39:36

完美的辦法是設置相對母公司的尺寸即高度&寬度以適應絕對小孩。

http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

這傢伙寫的不夠了解CSS定位的基礎知識。實際上，相對父項用於從邏輯上定位其所有絕對子項。但它並沒有分享自己的身體位置，因此它不能自我覆蓋相對的孩子。

來源

2017-01-29 19:44:45 SouravOrii

CSS：適合相對定位的父，以絕對定位的孩子

回答

相關問題