Question

我为.box2的工作提供了负余量，但是其中.slide的内部div无法工作，我希望.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>

Answer 1

您可以使用CSS position属性：

.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>

Answer 2

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

父母和第一个/最后一个孩子
如果没有边框，内边距，内联部分，创建的块格式上下文或 clearance 来将块的边距顶部与其第一个子块的边距顶部分开...那么这些边距坍方。折叠后的边距最终出现在父级之外。

在父母与孩子之间增加某种距离可以防止崩溃。
以下是一些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>

Answer 3

尝试一下

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

另一个负边距div内的负边距

3 个答案: