позиционирование блока, внутри другого блока

Question

Что нужно сделать, чтобы красный квадрат был между белым фоном и оранжевым квадратом, я попыталась использовать "position: absolute;" и "position: relative;", но ничего не получилось P.s если можно, без вынесения элемента "three" в html

* {
  padding: 0 auto;
  margin: 0 auto;
}

.body {
  background: white;
}

.one {
  height: 100vh;
  width: 500px;
  background: orange;
}

.two {}

.three {
  height: 100px;
  width: 100px;
  background: red;
}

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

Answer 1

.one {
  height: 100vh;
  width: 500px;
  background: orange;
  
  /* -------------------------------------- */
  
  position: relative;
}

.three {
  height: 100px;
  width: 100px;
  background: red;
  
  /* -------------------------------------- */

  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%);
}

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

БЛОГ НА HUSL

позиционирование блока, внутри другого блока

Ответы (1 шт):