Kolom Kisi CSS Perluas Induk Sebelumnya, Div dengan Posisi Absolut

Saya memiliki div induk yang posisinya relatif. Ada gambar di dalamnya yang mengatur ketinggian div. Lalu, ada div posisi absolut di dalamnya yaitu tampilan grid. Kolom di dalam kisi meluas melewati div induk yang disetel ke 100%. Berikut adalah contoh kode.

<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>

Div overlay-item melampaui div image-overlay. Ada saran?


html css css-grid css-position
person Tyler Nichol    schedule 02.05.2019    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

Gambar (yang menentukan lebar pembungkus luar) berada dalam wadah di dalam pembungkus luar - jadi menambahkan inline-block ke pembungkus luar memastikan bahwa pembungkus luar cocok dengan lebar yang dibuat oleh gambar.

Juga membuat beberapa perubahan pada kode Anda (bersamaan dengan menghapus gaya sebaris):

  • ubah grid-template-columns menjadi 1fr 1fr 1fr dan bukannya 33% 33% 33% sehingga mengisi ruang horizontal sepenuhnya,

  • menambahkan elemen display: block ke img untuk menghilangkan spasi di bawah gambar (dan dalam hal ini semua elemen sebaris).

Lihat demonya di bawah ini:

.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
Jadi pada dasarnya ini disebabkan oleh masalah indeks-z. Sekali, saya menambahkan z-index:2 berhasil. - person Tyler Nichol; 02.05.2019

arrow_upward
0
arrow_downward

Ini akhirnya menjadi masalah indeks-z. Saya perlu menambahkan ini ke div absolut dan posisinya baik-baik saja setelah itu.

person Tyler Nichol    schedule 02.05.2019