Столбцы сетки CSS расширяют прошлое родительского элемента, абсолютное позиционирование Div - PullRequest
Новая
       54

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

1 голос
/ 02 мая 2019

У меня есть родительский 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>

* * * * * * * * * * * * * * * * 100 * *.Есть предложения?

Ответы [ 2 ]

1 голос
/ 02 мая 2019

Изображение (которое определяет ширину внешней оболочки) находится в контейнере внутри внешней оболочки - поэтому добавление 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>
0 голосов
/ 02 мая 2019

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

...