位置绝对和保证金底部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了位置绝对和保证金底部相关的知识，希望对你有一定的参考价值。
我有这个绝对定位的容器..它的问题是我不能给它一个保证金底值！
我想要无论绿色容器里面有多少内容..我希望下一个div（下）总是在30px之下
我做不到，我不知道为什么！
<div class="bg-black">
<div class="bg-green">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</div>
</div>
<div class="under">
<h1>THIS SHOULD BE UNDER THE GREEN CONTAINER NO MATTER HOW MUCH THE CONTENT INSIDE IT</h1>
</div>
CSS
.bg-black {
background-color: #000;
position: relative;
width: 160px;
height: 120px;
}
.bg-green {
width: 120px;
position: absolute;
background-color: green;
margin-bottom:163px;
}
任何帮助，如何做到这一点以及为什么会发生！
谢谢
答案
这种外观可以通过简单的渐变来实现。
- 删除绝对定位（这实际上使元素对其他元素不可见）并删除父项高度
- 使用具有所需颜色停止的线性渐变，包括
transparent
Example
* {
margin: 0;
padding: 0;
list-style: none;
}
.bg-black {
background: linear-gradient(to bottom, #000 120px, transparent 120px);
width: 160px;
}
.bg-green {
width: 120px;
background-color: green;
margin-bottom: 10px;
}<div class="bg-black">
<div class="bg-green">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</div>
</div>
<div class="under">
<h1>Under the green container</h1>
</div>另一答案
绝对定位的元素将从正常流中移除，并且不会影响正常流中的元素。
以上是关于位置绝对和保证金底部的主要内容，如果未能解决你的问题，请参考以下文章
在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]