另一个减边距div内的减边距[重复]答案

【问题标题】：minus margin inside another minus margin div [duplicate]另一个减边距div内的减边距[重复]
【发布时间】：2019-08-30 12:25:36
【问题描述】：

我给.box2 的工作提供了负边距，但其中的内部 div .slide 不工作我希望 .slide 移动到 .box2 上方。

这是我尝试过的 jsfiddle 链接，请提出一些想法。enter link description here

这可能与边距本身有关，而不是与顶部有关吗？如果不可能，请指出。

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
}
.slide
{
  max-width:200px;
  margin:-25px auto 0 auto;
  height:60px;
  background:orange;
}
.slide1{
  float:left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

【问题讨论】：

你好。你的问题是答案？
?? @ЮрийСветлов

标签： html css

【解决方案1】：

我认为这个问题可能与margin collapse 有关。

父母和第一个/最后一个孩子
如果没有边框、填充、内联部分、创建的块格式上下文或 clearance 将块的 margin-top 与其第一个子块的 margin-top 分开......那么这些边距坍塌。折叠的边距最终在父级之外。

在父子之间添加某种间隙可以防止崩溃。
这里有几个methods：

填充

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  padding-top: 1px;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

边框

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  border-top: 1px solid transparent;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

伪元素

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
}

.box2:before,
.box2:after {
  content: ' ';
  display: table;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}

<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用 CSS 位置属性：

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
   position: relative;
  z-index: 1;
}
.slide
{
  max-width:200px;
  height:60px;
  background:orange;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.slide1{
  float:left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

【讨论】：

【解决方案3】：

试试这个

.slide {
    max-width: 200px;
    margin: -25px auto 0 auto;
    height: 60px;
    background: orange;
    position: relative;
    top: -50px;
}

【讨论】：