Question

我有一个绝对位置为div的孩子（蓝色框），一个默认位置为（静态）父对象的身体（容器）上挂着。当我为父对象定义边距顶部时，div子对象也将移位。

蓝盒是相对于其最接近的祖先放置的，因此在这种情况下，由于容器是静态放置的，因此相对于主体是放置的。（请参见https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute）

我以为这是边距崩溃的问题，但是我读到浮动元素和绝对定位元素的边距永远不会崩溃。

（请参见https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing）

body {
   background-color: #1f1f1f;
   height: 2000px;
}

.box {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}


.blue-box {
    background: lightskyblue;
    position: absolute;
    margin-top: 110px;
}

.green-box {
    background: lightgreen;
}

.container {
    background: rgba(0, 0, 0, 0.4);
    height: 200px;
    width: 200px;
    margin-top: 150px;
}

<div class="container">
  <div class="box blue-box"></div>
</div>

<div class="box green-box"></div>

我希望蓝框位于视口上方，而不位于容器框内

Answer 1

正如Mozilla文档中的第二句话所说， “ top，right，bottom和left属性确定了所定位元素的最终位置。”，您必须指定这些值之一才能进行实际定位。

 .blue-box{position: absolute;top:10px}

检查此密码笔：https://codepen.io/jsuryahyd/pen/ExYGbxr

顺便说一句，这也让我思考。谢谢。

绝对定位的孩子被静态父母取代

1 个答案: