Question

我尝试将div相对于其父级置于负顶值。这很好用，问题是现在这个div，即使它有一个负顶值，也会使父div更大。

如果父div不大，我该怎么办？

我不希望.innera-rel div使.a div更大（我不想看到底部的红色）。

HTML：

<div class="a">
  <div class="innera">
    blah blah blah
  </div>
  <div class="innera-rel">
    test
  </div>
</div>

CSS：

.a {
  background: red;
}
.innera {
  height: 80px;
  background: blue;
}

.innera-rel {
    border: 1px solid gray;
    background: white;
    position: relative;
    z-index: 100;
    right: -50px;
    top: -38px;
    width: 130px;
}

Answer 1

您看到的红色空间是.innera-rel在没有定位的情况下占用的空间。这个空间保持＆＃34;占用＆＃34;，你只需相对于那个空间移动div。如果您不希望发生这种情况，则必须使用绝对定位。

Answer 2

给予.a

相同的高度

＆＃13;

.a {
  background: red;
    height: 80px;
}
.innera {
  height: 80px;
  background: blue;
}

.innera-rel {
    border: 1px solid gray;
    background: white;
    position: relative;
    z-index: 100;
    right: -50px;
    top: -38px;
    width: 130px;
}
}

＆＃13;

<div class="a">
  <div class="innera">
    blah blah blah
  </div>
  <div class="innera-rel">
    test
  </div>
</div>

＆＃13;

Answer 3

.a {
  background: red;
  height:80px;
}
.innera {
  height: 80px;
  background: blue;
}

使.a高度与.innera身高

相同

Answer 4

这会使红条消失：

.a {
  display: inline;
}

负顶值使父div更高

4 个答案: