CSS - уменьшающий фоновый div - PullRequest
Новая
       8

CSS - уменьшающий фоновый div

0 голосов
/ 25 апреля 2018

Мне нужно сделать следующее:
enter image description here

Содержимое второго раздела должно совпадать с первым и третьим.
Мне удалось переместить контент-div в одну сторону, либо я перекрываю раздел один или два с «position :lative» и отрицательным значением top / bottom.

Возможно ли каким-то образом уменьшить фоновую оболочку div, но таким образом, это не влияет на внутреннюю оболочку содержимого div?

Я упростил изображение. Секции имеют угловые псевдоэлементы (после и до). Не знаю, если это имеет значение.

С помощью этого кода мне удается переместить мой раздел контента вниз или вверх: 

.site-container {
    position: relative;
    bottom: -100px;
}

Но основной раздел все еще так же высок, как и внутренний контент.

1 Ответ

0 голосов
/ 25 апреля 2018

Вы можете просто позиционировать два <div> элемента в зависимости от второй секции, чтобы не зависеть от размера контейнера: 

section {
  display: block;
  width: 50vw;
  height: 30vh;
  border: 2px solid;
  position: relative;
}

div {
  position: absolute;
  left: 15vw;
  width: 20vw;
  height: 10vh;
  border: 1px solid;
  background: white;
  z-index: 2;
}

div:first-child {
  top: -5vh;
}

div:nth-child(2) {
  bottom: -5vh;
}
<section>1</section>
<section>2
  <div>2.1</div>
  <div>2.2</div>
</section>
<section>3</section>
...