Как мы можем добавить один этот тип к другому, используя html и css

Question

Эй, как мы можем сложить одно на другое в HTML и css, как указано в пи c. https://imgur.com/snRxFqw

Answer 1

Всегда лучше иметь собственный код, в котором мы можем увидеть проблему и где вы можете застрять. Вы можете использовать отрицательное значение margin, чтобы поместить элемент поверх другого, чтобы добиться эффекта плавания.

Поскольку вы не предоставили никакого собственного кода, я привел небольшой пример того, как это работает с HTML / CSS.

.? {
  position: relative;
  margin: -60px auto 0 auto; /* float + padding */
  background: white;
}

.? {
  padding: 40px;
  background: orangered;
}

.? {
  padding: 40px;
  background: yellowgreen;
}

/* misc styling */
.? {
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
 }

<section class="?">
  <h1>Unhealthy food causes problems</h1>
</section>
<section class="?">
  <div class="?">I'm floating.</div>
  <h1>Try a salad next time!</h1>
</section>