Как показывать только часть блока над 2 другими блоками?

Question

[Артем Прохоров]

Песочница
Хочу чтобы бесцветный блок с бордером был виден только на голубом блоке.

Comments

[Юрий Иванов]

Не понятно в чем вопрос, в заголовке или в описании, ибо 2 разные задачи.
Если второе, то просто вложите бесцветный блок в голубой див и уберите абсолютное позиционирование, если первое, то создайте обертку для трех дивов и спозиционируйте абсолютом так как вам надо

Answer 1

[archelon]

вариантов несколько, но с текущей разметкой не получится.
кроме того, двигать разноцветные прямоугольники — это абстрактная задача. на практике нужно учитывать контент.
самое простое:

<div class="one"></div>
  <div class="two"><div class="pocket"></div></div>

body {
  display: flex;
}
.one {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.pocket {
  position: absolute;
  left: -50px;
  height: 100px;
  width: 100px;
  border: 1px solid;
}

.two {
  position: relative;
  overflow:hidden;
  width: 200px;
  height: 200px;
  background-color: blue;
}