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

Он не перекрывает синий из-за overflow-x: hidden; в .split, если вы удалите его, он будет перекрывать его.

РЕДАКТИРОВАТЬ: Извините, забыл сказать, чтобы добавить z-index: 2; в .right