css - 负 top 值使父 div 更高

Question

我尝试将一个 div 相对于其具有负顶值的父级定位。这工作正常，现在的问题是这个 div，即使它有一个负的 top 值也会使父 div 更大。

我该怎么做才能让父 div 不那么大？

Here's a fiddle .

我不希望 .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 在未定位的情况下将占用的空间。该空间保持“占用”状态，您只需相对于该空间移动 div。如果您不希望发生这种情况，则必须使用绝对定位。