Столбцы сетки CSS расширяют Past Parent, Div с абсолютным позиционированием

У меня есть родительский div, который позиционируется относительно друг друга. В нем есть изображение, которое устанавливает высоту div. Затем внутри есть элемент div с абсолютной позицией, который является отображением сетки. Столбцы внутри сетки расширяются за пределы родительского div, для которого установлено значение 100%. Вот пример кода.

<div style="position:relative;">
  <div style="position:relative;">
    <img src="/imageurl" />
  </div>
  <div class="image-overlay" style="display:grid;grid-template-columns:33% 33% 33%;height:100%;position:absolute">
    <div class="overlay-item" style="height:100%">Item 1</div>
    <div class="overlay-item" style="height:100%">Item 1</div>
    <div class="overlay-item" style="height:100%">Item 1</div>
  </div>
</div>

Диваны overlay-item выходят за пределы image-overlay div. Какие-либо предложения?


html css css-grid css-position
person Tyler Nichol    schedule 02.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Изображение (которое определяет ширину внешней оболочки) находится в контейнере внутри внешней оболочки, поэтому добавление inline-block во внешнюю оболочку гарантирует, что внешняя оболочка соответствует ширине, созданной изображением.

Также внесла пару изменений в ваш код (вместе с удалением встроенных стилей):

  • измените grid-template-columns на 1fr 1fr 1fr вместо 33% 33% 33%, чтобы он заполнял горизонтальное пространство полностью,

  • добавлен display: block к элементу img, чтобы удалить пробелы под изображением (и в этом отношении любой встроенный элемент).

См. Демонстрацию ниже:

.wrapper {
  display: inline-block;
  position: relative;
}

img {
  display: block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100%;
}

.overlay-item {
  border: 1px solid cadetblue;
}
<div class="wrapper">
  <div>
    <img src="http://via.placeholder.com/400" />
  </div>
  <div class="image-overlay">
    <div class="overlay-item">Item 1</div>
    <div class="overlay-item">Item 1</div>
    <div class="overlay-item">Item 1</div>
  </div>
</div>

person kukkuz    schedule 02.05.2019
comment
Так что в основном все сводилось к проблеме z-индекса. Однажды я добавил z-index: 2, он работает. - person Tyler Nichol; 02.05.2019

arrow_upward
0
arrow_downward

В конечном итоге это была проблема с z-индексом. Мне нужно добавить это в абсолютный div, и после этого он будет позиционироваться нормально.

person Tyler Nichol    schedule 02.05.2019