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：适合相对定位的父，以绝对定位的孩子

回答

相关问题