Запретить абсолютно позиционированному div увеличивать размер родительского элемента - PullRequest
Новая
       11

Запретить абсолютно позиционированному div увеличивать размер родительского элемента

0 голосов
/ 06 августа 2020

У меня есть div, заполненный содержимым, и я хочу складывать фоновые изображения за ним . Я не хочу комбинировать эти фоновые изображения, , потому что я получаю длинную «самую содержательную отрисовку» в Google PageSpeed ​​и обнаружил, что наложение меньших изображений дает мне лучший результат по этому метри c. Страница должна прокручиваться до конца содержимого, но я хочу, чтобы фоновые изображения были обрезаны по окончании содержимого.

Приведенный ниже код почти делает то, что я хочу, но не сокращает фоновые изображения короче. 

img {
 opacity: 0.3;
 z-index: -999;
}

.abs {
  position: absolute;
}

footer {
  background-color: rgba(238,130,238, 1);
}

.overflow{
  overflow: hidden;
}
<div class='overflow'>
  <div class='abs'>
    <img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
    <img src='https://sitesent.com/static/6d91c86c0fde632ba4cd01062fd9ccfa/5a190/gatsby-astronaut.png' />
  </div>
  <h1>Hi people</h1>
  <p>This page should be able to scroll.</p>
  <div class='filler'>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
    <p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p><p>filler</p>
  </div>
  <footer>
    But the bottom of the page should be right below this line. The background images should not shrink, but should be cut off at this point
  </footer>
</div>

В моем проекте gatsby, поэтому я создал песочницу для этой проблемы с помощью gatsby, но у меня были некоторые проблемы с песочницей, поэтому я не думаю, что она работает полностью

1 Ответ

1 голос
/ 06 августа 2020

Добавить: 

position: relative;

к элементу с классом: 

overflow

Обновленная демонстрация: Обновлен jsfiddle

...