爲什麼邊框圍繞兒童定位相對

-1

我想知道爲什麼絕對定位的div的內容溢出邊界以及如何設置容器的高度以確保沒有任何東西會溢出。知道孩子的身高是可變的。爲什麼邊框圍繞兒童定位相對

.container { 
 
    border: 2px solid #fff; 
 
    padding: 20px; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    color: #ff0000 
 
} 
 
.relative { 
 
    position: relative; 
 
}

<div id="card" class="container"> 
 
    <div class="absolute"> 
 
    <h1 style="margin-left : 200px">beaucoup de texte</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
    </p> 
 
    </div> 
 
    <div class="relative"> 
 
    <h1>moins de texte</h1> 
 
    hello and welcome 
 
    </div> 
 
</div>

另一種方式來解釋，在這個的jsfiddle：

https://jsfiddle.net/jjjepmwm/5/

來源

2017-01-12 mustafa918

周圍有.container邊界 - 這是最大的股利。 http://codepen.io/sol_b/pen/jyqapw – sol

我的問題是爲什麼它不包含div定位絕對，謝謝 – mustafa918

*絕對定位*'絕對'意味着它採取了正常流程，你不會能夠隨着「絕對」增長而增長'容器'...所以答案是你不能** – kukkuz

的邊境只有你最大的股利。你的代碼的問題是你創建了一個絕對的div，它不知道它的父節點的邊界。如果內容溢出，您可以隱藏內容。

來源

2017-01-12 10:27:38

將絕對定位的元素從佈局中取出。父div不會清除它絕對位置的子div。

您需要設置父div的高度，以便子div不會流出它。

.container { 
 
    border: 2px solid green; 
 
    padding: 20px; 
 
    height:150px; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    color: #ff0000 
 
} 
 
.relative { 
 
    position: relative; 
 
}

<div id="card" class="container"> 
 
    <div class="absolute"> 
 
    <h1 style="margin-left : 200px">beaucoup de texte</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 
 
    </p> 
 
    </div> 
 
    <div class="relative"> 
 
    <h1>moins de texte</h1> 
 
    hello and welcome 
 
    </div> 
 
</div>

來源

2017-01-12 10:28:05 ab29007

我的絕對** div的高度是動態的，我想使容器的高度相對於* *絕對** div – mustafa918

這是'絕對'唯一的css解決方案。有可能是一個JavaScript解決方案或如果你編輯你的問題，告訴你想要實現那麼可能有另一種方式來實現，而不是'絕對' – ab29007

我可以用JavaScript來做到這一點我想用CSS – mustafa918

使用position正確的。 position: relative設置一個計數開始爲嵌入式position: absolute

.parent { 
 
    position: relative; 
 

 
    background-color: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
.child { 
 
    position: absolute; 
 
    left: 5px; 
 
    top: 20px; 
 

 
    background-color: blue; 
 
    width: 50px; 
 
    height: 20px; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

來源

2017-01-12 10:29:34

做什麼我應該如果孩子的身高是動態的 – mustafa918

@Deyd嘗試其他定位方法 –

爲什麼邊框圍繞兒童定位相對

回答

相關問題