คอลัมน์ตาราง CSS ขยายพาเรนต์ในอดีต, 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 divs ขยายผ่าน 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