position คุณสมบัติระบุชนิดของวิธีการวางตำแหน่งที่ใช้สำหรับองค์ประกอบ (คงญาติคงที่หรือแน่นอน)
ตำแหน่งทรัพย์สิน
position คุณสมบัติระบุชนิดของวิธีการวางตำแหน่งที่ใช้สำหรับองค์ประกอบ
มีสี่ค่าของตำแหน่งที่แตกต่างกัน
-
static -
relative -
fixed -
absolute
องค์ประกอบอยู่ในตำแหน่งแล้วใช้ด้านบนด้านล่างซ้ายและคุณสมบัติที่เหมาะสม แต่คุณสมบัติเหล่านี้จะไม่ทำงานเว้นแต่ position การตั้งค่าคุณสมบัติแรก พวกเขายังทำงานที่แตกต่างกันขึ้นอยู่กับค่าตำแหน่ง
position: static;
องค์ประกอบ HTML อยู่ในตำแหน่งที่คงที่โดยค่าเริ่มต้น
องค์ประกอบในตำแหน่งที่คงที่ไม่ได้รับผลกระทบจากด้านบนด้านล่างซ้ายและคุณสมบัติที่เหมาะสม
องค์ประกอบที่มี position: static; ไม่ได้ตำแหน่งในทางใด ๆ เป็นพิเศษ; มันมักจะอยู่ในตำแหน่งตามการไหลปกติของหน้า:
นี่คือ CSS ที่ใช้:
position: relative;
องค์ประกอบที่มี position: relative; อยู่ในตำแหน่งเทียบกับตำแหน่งปกติ
การตั้งค่าด้านบนขวาล่างและคุณสมบัติด้านซ้ายขององค์ประกอบค่อนข้างตำแหน่งจะทำให้มันถูกปรับออกไปจากตำแหน่งปกติ เนื้อหาอื่น ๆ จะไม่ได้รับการปรับให้พอดีกับช่องว่างที่เหลือจากองค์ประกอบ
นี่คือ CSS ที่ใช้:
position: fixed;
องค์ประกอบที่มี position: fixed; อยู่ในตำแหน่งที่เมื่อเทียบกับวิวพอร์ตซึ่งหมายความว่ามันมักจะอยู่ในสถานที่เดียวกันแม้ว่าหน้าจะเลื่อน ด้านบนขวาล่างและคุณสมบัติที่เหลือจะใช้ในการวางตำแหน่งขององค์ประกอบ
องค์ประกอบคงไม่ปล่อยให้เกิดช่องว่างในหน้าเว็บที่ตามปกติจะได้รับการตั้งอยู่
ขอให้สังเกตองค์ประกอบคงที่มุมขวาล่างของหน้า นี่คือ CSS ที่ใช้:
ตัวอย่าง
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} ลองตัวเอง» position: absolute;
องค์ประกอบที่มี position: absolute; อยู่ในตำแหน่งเทียบกับบรรพบุรุษที่ใกล้ที่สุดในตำแหน่ง (แทนตำแหน่งที่จะญาติวิวพอร์ตเช่นคงที่)
อย่างไรก็ตาม; ถ้าเป็นองค์ประกอบในตำแหน่งที่แน่นอนไม่มีบรรพบุรุษในตำแหน่งที่จะใช้ร่างกายของเอกสารและเคลื่อนไปตามด้วยการเลื่อนหน้า
หมายเหตุ: "positioned" องค์ประกอบหนึ่งที่มีตำแหน่งเป็นอะไรยกเว้น static
นี่คือตัวอย่างง่ายๆ
นี่คือ CSS ที่ใช้:
ตัวอย่าง
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
ลองตัวเอง» องค์ประกอบที่ทับซ้อนกัน
เมื่อองค์ประกอบอยู่ในตำแหน่งที่พวกเขาสามารถทับซ้อนองค์ประกอบอื่น ๆ
z-index คุณสมบัติระบุลำดับการเรียงองค์ประกอบ (ซึ่งองค์ประกอบที่ควรจะอยู่ในหน้าหรือข้างหลังคนอื่น ๆ )
องค์ประกอบที่สามารถมีคำสั่งสแต็คบวกหรือลบ:
นี้เป็นหัวข้อ
เพราะภาพที่มีดัชนี z -1 ก็จะถูกวางไว้หลังข้อความ
องค์ประกอบคำสั่งสแต็คมากขึ้นอยู่เสมอในด้านหน้าขององค์ประกอบที่มีการสั่งซื้อสแต็คที่ต่ำกว่า
 | หมายเหตุ: หากสององค์ประกอบในตำแหน่งที่ทับซ้อนกันได้โดยไม่ต้อง z-index ระบุองค์ประกอบในตำแหน่งสุดท้ายในรหัส HTML จะแสดงอยู่ด้านบน |
|---|
การวางตำแหน่งข้อความในภาพ
วิธีการวางตำแหน่งข้อความผ่านภาพ:
ตัวอย่าง
ลองตัวเอง:
บนซ้าย» ขวาแรก» ซ้ายล่าง» ขวาล่าง» Centered »
ตัวอย่างเพิ่มเติม
ตั้งรูปร่างของสิ่งนั้น ๆ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่ารูปทรงของสิ่งนั้น ๆ องค์ประกอบที่ถูกตัดเป็นรูปร่างนี้และแสดง
วิธีการแสดงล้นในองค์ประกอบที่ใช้เลื่อน
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าคุณสมบัติล้นในการสร้างแถบเลื่อนเมื่อเนื้อหาขององค์ประกอบที่มีขนาดใหญ่เกินไปให้พอดีในพื้นที่ที่กำหนด
วิธีการตั้งค่าเบราว์เซอร์ในการจัดการน้ำล้นโดยอัตโนมัติ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการตั้งค่าเบราว์เซอร์ในการจัดการน้ำล้นโดยอัตโนมัติ
เปลี่ยนเคอร์เซอร์
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการเปลี่ยนเคอร์เซอร์
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
คุณสมบัติทั้งหมดตำแหน่ง CSS
| คุณสมบัติ | ลักษณะ |
|---|---|
| bottom | ชุดขอบขอบด้านล่างสำหรับกล่องตำแหน่ง |
| clip | คลิปองค์ประกอบตำแหน่งอย่างแน่นอน |
| cursor | ระบุชนิดของเคอร์เซอร์ที่จะแสดง |
| left | ชุดขอบขอบซ้ายสำหรับกล่องตำแหน่ง |
| overflow | ระบุสิ่งที่เกิดขึ้นหากเนื้อหาล้นกล่ององค์ประกอบของ |
| overflow-x | ระบุว่าจะทำอย่างไรกับขอบด้านซ้าย / ขวาของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ |
| overflow-y | ระบุว่าจะทำอย่างไรกับด้านบนขอบ / ด้านล่างของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ |
| position | ระบุชนิดของการวางตำแหน่งสำหรับองค์ประกอบ |
| right | ชุดขอบอัตรากำไรที่เหมาะสมสำหรับกล่องตำแหน่ง |
| top | ชุดขอบขอบด้านบนสำหรับกล่องตำแหน่ง |
| z-index | ชุดคำสั่งสแต็คขององค์ประกอบ |