ความแตกต่างระหว่างการวางตำแหน่งแบบคงที่และแบบสัมพัทธ์

ใน CSS การวางตำแหน่งคงที่ (ค่าเริ่มต้น) และการวางตำแหน่งสัมพัทธ์แตกต่างกันอย่างไร

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

ตำแหน่งสัมพัทธ์ช่วยให้คุณระบุเฉพาะเจาะจงชดเชย ( left, topฯลฯ ) ซึ่งจะสัมพันธ์กับตำแหน่งปกติขององค์ประกอบในการไหลเวียนของ HTML ดังนั้นถ้าฉันมีกล่องข้อความอยู่ในกล่องข้อความdivฉันสามารถใช้การวางตำแหน่งสัมพัทธ์บนกล่องข้อความเพื่อให้แสดงในตำแหน่งที่เฉพาะเจาะจงโดยเทียบกับตำแหน่งที่ปกติจะวางไว้ภายในdiv:

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

และเมื่อposition: relativeใช้ a กับองค์ประกอบหลักในลำดับชั้น:

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

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

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

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

.. ไม่ว่าองค์ประกอบหลักของคุณจะใช้overflow: ?ในการกำหนดลักษณะการทำงานของการเลื่อน (ถ้ามี)

ด้วยการวางตำแหน่งที่แน่นอนและตำแหน่งคงที่องค์ประกอบจะถูกนำออกจากโฟลว์ HTML

คุณสามารถดูภาพรวมง่ายๆได้ที่นี่: W3School

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

ในคำตอบของ "ทำไม CSS จึงยังคงใช้ position: static;" ในสถานการณ์เดียวโดยใช้ตำแหน่ง: สัมพัทธ์สำหรับพาเรนต์และตำแหน่ง: ค่าสัมบูรณ์สำหรับเด็กจำกัดความกว้างของสเกลของเด็ก ในระบบเมนูแนวนอนซึ่งคุณสามารถมีลิงก์ "คอลัมน์" ได้การใช้ "width: auto" จะใช้ไม่ได้กับผู้ปกครองญาติ ในกรณีนี้การเปลี่ยนเป็น "คงที่" จะทำให้ความกว้างเปลี่ยนแปลงได้ขึ้นอยู่กับเนื้อหาภายใน

ฉันใช้เวลาสองสามชั่วโมงสงสัยว่าทำไมฉันถึงไม่สามารถปรับเปลี่ยนคอนเทนเนอร์ได้ตามปริมาณเนื้อหาที่อยู่ภายใน หวังว่านี่จะช่วยได้!

ตำแหน่งสัมพัทธ์ให้คุณใช้บน / ล่าง / ซ้าย / ขวาสำหรับการวางตำแหน่ง Static จะไม่อนุญาตให้คุณทำสิ่งนี้เว้นแต่คุณจะใช้พารามิเตอร์ระยะขอบ มีความแตกต่างระหว่าง Top และ margin-top

คุณไม่จำเป็นต้องใช้แบบคงที่มากนักเนื่องจากเป็นค่าเริ่มต้น

ตำแหน่งสัมพัทธ์สัมพันธ์กับการไหลปกติ ตำแหน่งสัมพัทธ์ขององค์ประกอบนั้น (พร้อมออฟเซ็ต) สัมพันธ์กับตำแหน่งที่องค์ประกอบนั้นจะเป็นปกติหากไม่ได้ย้าย

Matthew Abbottมีคำตอบที่ดีจริงๆ

แอบโซลูทและญาติรายการตำแหน่งเชื่อฟังtop, left, rightและbottomคำสั่ง (ชดเชย) ที่รายการคงอยู่ในตำแหน่งไม่ได้

รายการที่อยู่ในตำแหน่งค่อนข้างจะย้ายออฟเซ็ตจากจุดที่ปกติจะอยู่ใน html

รายการที่อยู่ในตำแหน่งที่แน่นอนจะย้ายออฟเซ็ตออกจากเอกสารหรือองค์ประกอบที่อยู่ในตำแหน่งถัดไปที่อยู่บนโครงสร้าง DOM

คงที่: องค์ประกอบตำแหน่งคงที่คือสิ่งที่เราได้รับจากค่าเริ่มต้น (ตำแหน่งปกติของวัตถุ)

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

คงที่และสัมพัทธ์เป็นแอตทริบิวต์ตำแหน่งสัมพัทธ์ใช้สำหรับการใช้งานจำนวนมาก ไม่ใช่สำหรับหนึ่ง แต่โปรดทราบว่าแบบคงที่และแบบสัมพัทธ์ไม่เป็นอันตรายต่อโฟลว์เอกสารปกติของ Html คงเป็นตำแหน่งเริ่มต้นที่เมื่อคุณเขียนองค์ประกอบใด ๆ ใน Html หากองค์ประกอบมีตำแหน่งสัมพัทธ์องค์ประกอบนั้นสามารถวางตำแหน่งโดยสัมพันธ์กับตำแหน่งดั้งเดิมได้ เมื่อคุณต้องการปรับองค์ประกอบจากพื้นที่ขนาดเล็กให้ใช้ตำแหน่งสัมพัทธ์เพื่อที่คุณจะได้ไม่ต้องเพิ่มระยะขอบช่องว่าง ฯลฯ หากองค์ประกอบนั้นมีตำแหน่งสัมพันธ์กันและมีองค์ประกอบลูก ที่นี่เราสามารถทำการวัดได้เหมือนกับระดับแม่ หากคุณเพิ่มความกว้าง 10% ให้กับเด็กนั่นหมายความว่า (width + padding) x10% แต่คุณไม่ได้เพิ่มคีย์เวิร์ดสัมพัทธ์คุณจะได้ widthx10% นอกเหนือจากนั้นการใช้งานที่สำคัญที่สุดของญาติคือ คุณสามารถวางตำแหน่งองค์ประกอบใดก็ได้บนสุด