Question

如果我有这个dom结构

<div style="overflow:hidden;">
    <div id="d1" style="margin-top:-50px; height:10px;"></div>
    <div id="d2" style="height:30px;"></div>
    <div id="d3" style="height:30px;"></div>
</div>

我的问题是如何放置元素d2和d3？在第一个元素之后？即使d2将被隐藏，d3将被半隐藏（10px隐藏）。或者这两个元素将被放置在父元素的可见区域中？

我的问题是关于确切的CSS规范。

Answer 1

第一个孩子的负边际如何影响该位置下一个元素？

简单地说，他们遵循，虽然它比这更复杂，所以我建议在这里阅读更多规格。

body {
  padding: 50px;
}
#d {
  position: relative;
  background: red;
  border: 5px solid red;
}
#d1 {
  background: green;
}
#d2 {
  background: yellow;
}
#d3 {
  background: blue;
}

/*  these is for demo purpose only  */
#d:before {
  content: '';
  background: red;
  position: absolute;
  width: 100%;
  height: 5px;
  top: -5px;
  left: 0;
  z-index: 1;
}
#d:after {
  content: '';
  background: white;
  position: absolute;
  width: 100%;
  height: 45px;
  top: -50px;
  left: 0;
  opacity: .7;
  z-index: 1;
}

<div id="d">
    <div id="d1" style="margin-top:-50px; height:10px;"></div>
    <div id="d2" style="height:30px;"></div>
    <div id="d3" style="height:30px;"></div>
</div>

Answer 2

第一个孩子的负边际如何影响下一个元素的位置？

与零或正边距如何影响以下元素的位置没有什么不同，假设一切都在流程中：从顶部开始的正边距推动一个框并向下移动框，因此它跟随一个负边距。顶部拉一个盒子，然后向上拉盒子。包含块上overflow属性的值与正常流程无关。

规范没有明确提及，只是因为在这个特定情况下没有关于负边距的特殊规则。这只是基本的数学。关于负边距还有许多其他特殊规则，但它们都不适用于这种情况。

第一个孩子的负边际如何影响下一个元素的位置？

2 个答案: