จัดตำแหน่งอิสระ CSS

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

จัดตำแหน่งอิสระ CSS

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

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

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;

เห็นในรูปที่ต่อไปนี้:

ตัวอย่างที่ใช้ CSS จัดตำแหน่งอิสระ

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

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

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

คำเตือน：เพราะกล่องจัดตำแหน่งอิสระไม่มีความเกี่ยวข้องกับกระแสเอกสาร ดังนั้นเขาสามารถกันคลุมองค์ประกอบอื่นบนหน้าเว็บไซต์ สามารถตั้งค่า คุณสมบัติ z-indexเพื่อควบคุมลำดับการเรียงของกล่องเหล่านี้

ตัวอย่างที่ใช้ CSS จัดตำแหน่งอิสระ

จัดตำแหน่ง: จัดตำแหน่งอิสระ
ตัวอย่างนี้แสดงว่าจะใช้ค่าอิสระเพื่อจัดตำแหน่งองค์ประกอบ