ซ่อนตำแหน่งแน่นอนและโอเวอร์โฟลว์

เรามี DIV สองตัวตัวหนึ่งฝังอยู่ในอีกอันหนึ่ง หาก DIV ด้านนอกไม่อยู่ในตำแหน่งที่แน่นอน DIV ด้านในซึ่งอยู่ในตำแหน่งสัมบูรณ์จะไม่เป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอก ( ตัวอย่าง )

มีโอกาสหรือไม่ที่จะทำให้ DIV ด้านในเป็นไปตามส่วนล้นที่ซ่อนอยู่ของ DIV ด้านนอกโดยไม่ตั้งค่า DIV ด้านนอกให้อยู่ในตำแหน่งที่แน่นอน (สาเหตุที่ทำให้เลย์เอาต์ทั้งหมดของเราสกปรก) นอกจากนี้ยังมีตำแหน่งสัมพัทธ์สำหรับ DIV ภายในของเราไม่ได้เป็นตัวเลือกที่เราต้อง "เติบโตออก" ของ TD ตาราง ( exmple )

มีทางเลือกอื่นอีกไหม?

ทำให้ด้านนอก<div>ไปposition: relativeและด้านการ<div> position: absoluteมันควรจะทำงานสำหรับคุณ

แล้วposition: relativediv ชั้นนอกล่ะ? ในตัวอย่างที่ซ่อนด้านใน นอกจากนี้ยังจะไม่ย้ายในเลย์เอาต์เนื่องจากคุณไม่ได้ระบุด้านบนหรือด้านซ้าย

องค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะอยู่ในตำแหน่งที่เกี่ยวข้องกับrelativeผู้ปกครองหรือผู้ปกครองญาติที่ใกล้ที่สุดที่พบ ดังนั้นองค์ประกอบที่มีoverflow: hiddenควรอยู่ระหว่างrelativeและabsoluteองค์ประกอบในตำแหน่ง:

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

คุณแค่ทำdivสิ่งนี้:

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

ฉันหวังว่ารหัสนี้จะช่วยคุณได้ :)