为什么边框围绕儿童定位相对

-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尝试其他定位方法 –

为什么边框围绕儿童定位相对

回答

相关问题