CSS初学者，需要帮助定位重叠DIV

Question

我想创建一个部分，它分成 2 个部分，中间有一个小方块。我的定位有点问题，我设法把黑框放在中间，但它不会与蓝色部分重叠。

.attachment {
  cursor: default;
  color: black;
  background-color: black;
  line-height: 20px;
  width: 93px;
  height: 93px;
  box-sizing: border-box;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  left: -43px;
  margin-top: -47px;
  top: 50%;
  z-index: 2;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  top: 0;
  overflow-x: hidden;
}

.left {
  left: 0;
  background-color: blue;
  z-index: 1;
}

.right {
  right: 0;
  background-color: red;
}

<div class="split left">
  <div class="centered">
  </div>
</div>

<div class="split right">
  <div class="centered">
  </div>
  <div class="attachment"></div>
</div>

https://jsfiddle.net/46aoyrjc/

Answer 1

您可以使用负边距来做到这一点。

#blue{
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: blue;
  position: absolute;
}

#red{
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background-color: red;
  position: absolute;
}

#black{
  position: relative;
  background-color: black;
  height: 100px;
  width: 100px;
  margin-top: 20%;
  margin-left: -50px;
}

<div id="blue">
</div>

<div id="red">
<div id="black">
</div>
</div>

Answer 2

它不会与蓝色重叠，因为 .split 中的 overflow-x: hidden; 如果您删除它，它会重叠。

编辑：抱歉，忘了说要将 z-index: 2; 添加到 .right

CSS初学者，需要帮助定位重叠DIV

CSS beginner, need help positioning overlapped DIV

html

css

css-position