บังคับให้“ ตำแหน่ง: สัมบูรณ์” สัมพันธ์กับเอกสารไม่ใช่คอนเทนเนอร์หลัก

93

ฉันกำลังพยายามแทรก div ลงในส่วนใดส่วนหนึ่งของเนื้อหาและทำให้position: absoluteสัมพันธ์กับเอกสารทั้งหมดไม่ใช่องค์ประกอบหลักที่มีไฟล์position: relative.

html css css-position

— ทิโมธี Ruhle
แหล่งที่มา

หากตำแหน่งเป็นค่าสัมบูรณ์สัมพันธ์กับเอกสารแสดงว่าเป็นส่วนย่อยของ<body>แท็กไม่ใช่หรือ

— Jim Garrison

คุณเห็นวิธีแก้ปัญหาของฉันด้านล่างหรือไม่?

— tw16

ใช่. ฉันกำลังสร้างเทมเพลตที่ใช้ในหลาย ๆ หน้าและบางครั้งมันก็อยู่ในองค์ประกอบที่วางตำแหน่งสัมพันธ์กัน (ซึ่งฉันไม่สามารถควบคุมได้ตอนนี้ฉันเห็นว่ามันเป็นไปไม่ได้แล้วขอบคุณสำหรับความช่วยเหลือ +1 จากฉันและฉันจะทำเครื่องหมายเป็น ถูกต้องถ้าคุณบอกว่ามันเป็นไปไม่ได้ในคำตอบของคุณ

— Timothy Ruhle

BrainJar มีคำแนะนำแบบคลาสสิกทั้งหมดเกี่ยวกับการวางตำแหน่งใน CSSซึ่งจะช่วยไขข้อข้องใจต่างๆที่น่าสงสัยได้ที่นี่

— Alan H.

35

คุณจะต้องวางdivด้านนอกขององค์ประกอบและเข้าไปในposition:relativebody

— tw16
แหล่งที่มา

1

^^ นี้. ถ้ามันอยู่ในตำแหน่งที่แน่นอนก็ไม่มีเหตุผลที่จะให้มันอยู่ในองค์ประกอบตำแหน่งที่ค่อนข้างแน่นอน

— DOOManiac

7

@DOOManiac - คุณอาจต้องการให้มันอยู่ในองค์ประกอบที่อยู่ในตำแหน่งที่ค่อนข้างเหมาะสมเพราะคุณต้องการให้มันเรียกใช้สคริปต์การวางเมาส์เหนือหรือไม่เรียกใช้สคริปต์ mouseout ที่เรียกโดยผู้ปกครอง คำตอบของฉันอนุญาตให้เกิดสถานการณ์เช่นนี้

— Michael.Lumley

1

@DOOManiac เหตุผลในการใส่องค์ประกอบสัมบูรณ์ลงในองค์ประกอบสัมพัทธ์คือการวางตำแหน่ง div สัมบูรณ์ที่สัมพันธ์กับองค์ประกอบสัมพัทธ์ หากคุณต้องการจัดตำแหน่งให้สัมพันธ์กับร่างกายโดยค่าเริ่มต้นร่างกายจะสัมพันธ์กันแม้ว่าจะไม่ได้ตั้งค่าไว้ในลักษณะนั้นก็ตาม

— Jason Foglia

20

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

— walv

3

@walv: position:fixedและposition:absoluteไม่มีพฤติกรรมเดียวกัน คงที่นั้นสัมพันธ์กับวิวพอร์ต (ไม่ใช่เอกสาร) และจะทำให้รายการสามารถมองเห็นได้ตลอดเวลาแม้ว่าการเลื่อนอาจทำให้เกิดการทับซ้อนกันเป็นต้นฉันเข้าใจว่าอาจมีเหตุผลที่ถูกต้องสำหรับโครงสร้าง html แต่เนื่องจากคำถามเกี่ยวกับ html และ css คำตอบของฉันถูกต้อง วิธีเดียวที่ไม่มี JS ในการทำให้มันสัมพันธ์กับเอกสารคือการย้ายออกจากposition:relativeองค์ประกอบ

— tw16

95

position: fixedคุณกำลังมองหา

จาก MDN :

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

— Adrian Holovaty
แหล่งที่มา

28

ปัญหาเกี่ยวกับคำตอบนี้คือผู้ใช้ต้องการใช้ค่าสัมบูรณ์เนื่องจากองค์ประกอบคงที่ไม่ขยับในการเลื่อนและองค์ประกอบที่แน่นอนทำ :)

— เพื่อน

3

คุณคือตำนานที่แท้จริง

— Benisburgers

6

คำถามคือจะวางตำแหน่งอย่างไรให้สัมพันธ์กับเอกสารไม่ใช่วิวพอร์ต

— Paul Humphreys

สิ่งนี้อาจทำให้เกิดปัญหาใน ie11 เนื่องจากข้อผิดพลาดที่มีบริบทซ้อนกัน

— James Westgate

32

วิธีแก้ปัญหาของฉันคือใช้ jQuery เพื่อย้าย div ออกไปนอกพาเรนต์:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>

— Liorq
แหล่งที่มา

1

สิ่งนี้ช่วยแก้ปัญหาของฉันได้เนื่องจากฉันไม่สามารถวางองค์ประกอบไว้ในองค์ประกอบของร่างกายได้โดยตรงเนื่องจากฉันใช้หน้าต้นแบบ ขอบคุณ!

— Osprey

9

หากคุณไม่ต้องการแนบองค์ประกอบbodyวิธีแก้ปัญหาต่อไปนี้จะได้ผล

ฉันมาถึงคำถามนี้โดยมองหาวิธีแก้ปัญหาที่จะใช้งานได้โดยไม่ต้องแนบ div เข้ากับเนื้อความเพราะฉันมีสคริปต์เมาส์โอเวอร์ที่ฉันต้องการเรียกใช้เมื่อเมาส์อยู่เหนือทั้งองค์ประกอบใหม่และองค์ประกอบที่สร้างมันขึ้นมา ตราบเท่าที่คุณยินดีที่จะใช้ jQuery และได้รับแรงบันดาลใจจากคำตอบของ @Liam William:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

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

— ไมเคิลลัมลีย์
แหล่งที่มา

2

สิ่งที่ควรค่าแก่การกล่าวถึงคือฟังก์ชันตำแหน่ง jQueryUI

— Michael.Lumley

8

สิ่งนี้ไม่สามารถทำได้ด้วย CSS และ HTML

การใช้ Javascript / jQuery คุณอาจนำองค์ประกอบjQuery.offset()ไปยัง DOM และเปรียบเทียบjQuery.position()เพื่อคำนวณว่าควรจะปรากฏในหน้าใด

— มะนาว
แหล่งที่มา

IMHO คำตอบนี้มีประโยชน์มากที่สุด - โดยไม่ต้องย้ายองค์ประกอบโดยตรงใต้ร่างกาย (ซึ่งเป็นไปไม่ได้เสมอไป) และไม่ต้องใช้ตำแหน่งคงที่ซึ่งจะทำให้องค์ประกอบปรากฏอยู่เสมอแม้ว่าจะเลื่อนลงเราสามารถใช้ JS ได้เท่านั้น jQuery.offset({ left: 0 })สำหรับผู้ชนะ!

— BornToCode