0

Что нужно сделать, чтобы красный квадрат был между белым фоном и оранжевым квадратом, я попыталась использовать "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>

0

1 ответ 1

0

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.