Question

我似乎无法弄明白。我已经看过所有的例子和问题，但我不能让这些div在彼此之上。

它们具有1px的边界，并且由于某种原因，边界将div移动到右侧和底部。

我知道如果我禁用边框然后所有在线代码工作得很好，但我需要那些虚线和他们，div不再对齐。 Z-index不起作用，蓝色div不会显示在上面。

<style>
    .content {
      width: 64px;
      height: 64px;
      margin: 32px;
      background-color: #FFD800;
      position: relative;
    }

    .content div {
      width: inherit;
      height: inherit;
      position: absolute;
      border-style: dotted;
    }

    .margin {
      border-color: #03A9F4;
      z-index: 3;
    }

    .border {
      border-color: #black;
      z-index: 2;
    }

    .padding {
      border-color: #808080;
      z-index: 1;
    }
</style>

<div class="content">
  <div class="margin">
    <div class="border">
      <div class="padding">

      </div>
    </div>
  </div>
</div>

Answer 1

我认为这就是你想要的。 width描述了<div>的内部宽度。边框宽度位于其上方。因此，每个<div>的边框宽度都是其继承宽度的两倍。

.content {
  width: 64px;
  height: 64px;
  margin: 32px;
  background-color: #FFD800;
  position: relative;
}

.content div {
  top:0;
  bottom:0;
  right:0;
  left:0;
  position: absolute;
  border-style: dotted;
}

.margin {
  border-color: #03A9F4;
  z-index: 3;
}

.border {
  border-color: #black;
  z-index: 2;
}

.padding {
  border-color: #808080;
  z-index: 1;
}

<div class="content">
  <div class="margin">
    <div class="border">
      <div class="padding">

      </div>
    </div>
  </div>
</div>

css stack divs彼此叠加

1 个答案: