Перекрывающиеся относительно позиционированные элементы в CSS

Question

Я пытаюсь перекрывать два элемента, используя только CSS.

До сих пор я нашел один способ сделать это.Однако мне интересно, есть ли другие / лучшие способы сделать это.

Единственный метод, который я нашел при перемещении двух элементов ближе по вертикали, - это вычесть нижнее поле из нижнего элемента.Это должно учитывать оставшееся пространство, а затем вычесть то же поле из верхнего элемента, чтобы переместить его вниз.Я не использовал этот метод раньше, и мне интересно, является ли это наилучшим способом достижения этого перекрывающегося эффекта?

body {
 width: 100%;
 height: 100%;
 background: lightgrey;
}

.bottom, .top{
  width: 20%;
  padding-bottom: 20%;
}

.top {
  background: blue;
  margin-bottom: -250px;
}

.bottom {
  padding-top:250px;
  margin-bottom: -250px;
  background: red;
  overflow: hidden;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

<div class="top"></div>
<div class="bottom"></div>

Answer 1

Я думаю, что это проще

    body {
     width: 100%;
     height: 100%;
     background: lightgrey;
    }
   .bottom, .top{
     width: 20%;
     padding-bottom: 20%;
   }
   .top {
     background: blue;
   }
   .bottom { 
     background: red; 
     border-radius: 50% 50% 0 0;
     padding-top: 250px;
     transform: translateY(-50%);
   }

<div class="top"></div>
<div class="bottom"></div>

Answer 2

html, body {
  margin: 0;
  padding: 0;
}

.parent {
  position: relative;
  width: 20%;
}

.child {
  height: 200px;
  background-color: blue;
}

.child--foreground {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: red;
  border-radius: 30px;
}

<div class="parent">
  <div class="child child--background">
    Background
  </div>
    <div class="child child--foreground">
    Foreground
  </div>
</div>

, если вы пытаетесь поместить элемент поверх другого, я думаю, вам следует использовать позиционирование https://css -tricks.com / almanac / properties/ п / позиция /