ตำแหน่งที่แน่นอนภายในตำแหน่งที่แน่นอน

ฉันมี 3 divองค์ประกอบ

อันดับ 1 divใหญ่กว่า (ห่อ) และมีposition:relative;

divตำแหน่งที่2 อยู่ในตำแหน่งสัมบูรณ์กับdivตำแหน่งสัมพัทธ์ที่1 (และรวมอยู่ในตำแหน่งที่ 1 div)

อันดับ 3 divอยู่ในอันดับ 2 divและยังมีตำแหน่งที่แน่นอน

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

เหตุใดdivตำแหน่งที่ 3 จึงเป็นค่าสัมบูรณ์กับตำแหน่งที่ 2 div(ซึ่งเป็นตำแหน่งที่แน่นอนกับตำแหน่งที่ 1 div) และdivตำแหน่งที่1 จึงมีตำแหน่งสัมพันธ์

เพราะที่ 3 divคือการวางตำแหน่งที่แน่นอนที่จะ div2

เนื่องจากposition: absoluteรีเซ็ตตำแหน่งสัมพัทธ์สำหรับเด็กเช่นเดียวกับที่position: relativeทำ

ไม่มีทางแก้ไข - ถ้าคุณต้องการให้คนที่สามdivอยู่ในตำแหน่งที่ค่อนข้างใกล้เคียงกับคนแรกคุณจะต้องทำให้มันเป็นลูกของคนแรก

ทั้งสองposition:relativeและposition:absoluteสร้างองค์ประกอบที่มีเป็นผู้ตรวจสอบตำแหน่ง

หากคุณต้องการให้ div 3 อยู่ในตำแหน่งตาม div 1 ให้กำหนดตำแหน่งรองโดยตรงของ div 1

โปรดทราบว่าposition: relativeหมายถึงองค์ประกอบอยู่ในตำแหน่งที่เมื่อเทียบกับของธรรมชาติตำแหน่งและposition: absoluteหมายถึงองค์ประกอบอยู่ในตำแหน่งที่สัมพันธ์กับมันเป็นครั้งแรกposition:relativeหรือposition:absoluteบรรพบุรุษ

ตำแหน่งคงที่:ตำแหน่งคงที่เป็นค่าเริ่มต้นที่องค์ประกอบจะปรากฏในโฟลว์ปกติของไฟล์ HTML ของคุณหากไม่มีการระบุตำแหน่งเลย

สำคัญ: top, right, bottomและleftคุณสมบัติไม่มีผลในแบบคงที่ในตำแหน่ง ELEMENT

ตำแหน่งสัมพัทธ์: การวางตำแหน่งองค์ประกอบด้วยค่าสัมพัทธ์จะทำให้องค์ประกอบ (และพื้นที่ว่าง) อยู่ในโฟลว์ปกติของไฟล์ HTML ของคุณ

จากนั้นคุณสามารถย้ายองค์ประกอบโดยเงินบางส่วนโดยใช้คุณสมบัติleft, right, topและbottomและอย่างไรก็ตามสิ่งนี้อาจทำให้องค์ประกอบทับซ้อนองค์ประกอบอื่น ๆ ที่อยู่ในหน้าซึ่งอาจเป็นหรือไม่ได้ผลตามที่คุณต้องการ

องค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างเคลื่อนที่สามารถเคลื่อนออกจากจุดได้ แต่พื้นที่ว่างนั้นยังคงอยู่

ตำแหน่งสัมบูรณ์:การใช้ค่าตำแหน่งสัมบูรณ์กับองค์ประกอบจะลบออกจากโฟลว์ปกติ เมื่อคุณย้ายองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจุดอ้างอิงคือด้านบน / ซ้ายขององค์ประกอบที่มีใกล้เคียงที่สุดซึ่งมีการประกาศตำแหน่งอื่นที่ไม่ใช่แบบคงที่หรือเรียกอีกอย่างว่าบริบทการวางตำแหน่งที่ใกล้ที่สุด ดังนั้นหากไม่มีองค์ประกอบที่มีตำแหน่งอื่นนอกเหนือจากสแตติกอยู่องค์ประกอบนั้นจะถูกวางตำแหน่งจากมุมบนซ้ายขององค์ประกอบร่างกาย

ในกรณีของคุณตู้คอนเทนเนอร์ที่ใกล้ที่สุดอันดับ 3 คืออันดับ 2

อีกคำตอบที่ชัดเจน

สถานการณ์ปัจจุบันของคุณคือ:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

และคุณกำลังดิ้นรนกับมัน

หากคุณสามารถเปลี่ยน HTML ได้เพียงทำสิ่งนี้:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

สาเหตุที่divองค์ประกอบที่ 3 อยู่ในตำแหน่งอย่างแน่นอนไปยังdivองค์ประกอบที่2 เป็นเพราะตามข้อกำหนดของ CSS ที่อธิบายไว้ที่นี่เนื่องจากองค์ประกอบ "พาเรนต์" (กล่าวได้ดีกว่า: มีบล็อก) ขององค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนนั้นไม่จำเป็นต้องเป็นองค์ประกอบหลักในทันที แต่ ค่อนข้างเป็นองค์ประกอบที่อยู่ในตำแหน่งทันทีเช่นองค์ประกอบใด ๆ ที่มีการกำหนดตำแหน่งเป็นอะไรก็ได้ยกเว้นstaticตัวอย่างเช่นposition: relative/absolute/fixed/sticky;

ดังนั้นเมื่อใดก็ตามที่เป็นไปได้ในโค้ดของคุณหากคุณต้องการให้divองค์ประกอบที่ 3 อยู่ในตำแหน่งที่แน่นอนเกี่ยวกับองค์ประกอบที่ 1 divคุณควรกำหนดให้divองค์ประกอบที่2 ของคุณposition: static;เป็นค่าเริ่มต้น (หรือเพียงแค่ลบposition: ...การประกาศใด ๆในชุดกฎของdivองค์ประกอบที่2 ของคุณ) .

ข้างต้นจะทำให้บล็อกที่ 1 divเป็นบล็อกที่มีตำแหน่งที่ 3 อย่างแน่นอนdivโดยไม่สนใจที่ 2 divเพื่อจุดประสงค์ในการวางตำแหน่งนี้

หวังว่าจะช่วยได้

เผื่อว่าใครยังหาคำตอบอยู่

ฉันสามารถบรรลุผลลัพธ์นี้ได้โดยการเพิ่มclear: both;สไตล์ให้กับ div ตำแหน่งแรกที่ตั้งค่าใหม่และอนุญาตให้ใช้การabsoluteกำหนดตำแหน่งของตัวเอง