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

由于overflow-x: hidden;中的.split，如果与蓝色的蓝色重叠，则它不会与蓝色的重叠。

编辑：对不起，忘了说要向z-index: 2;添加.right

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

2 个答案: