CSS Layout - ตำแหน่ง พร็อพเพอ ร์ตี้
คุณสมบัติpositionระบุประเภทของวิธีการกำหนดตำแหน่งที่ใช้สำหรับองค์ประกอบ (คงที่, สัมพันธ์, คงที่, สัมบูรณ์หรือเหนียว)
ตำแหน่ง ทรัพย์สิน
คุณสมบัติpositionระบุประเภทของวิธีการกำหนดตำแหน่งที่ใช้สำหรับองค์ประกอบ
มีค่าตำแหน่งที่แตกต่างกันห้าค่า:
staticrelativefixedabsolutesticky
จากนั้นองค์ประกอบจะถูกจัดตำแหน่งโดยใช้คุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวา อย่างไรก็ตาม คุณสมบัติเหล่านี้จะใช้งานไม่ได้เว้นแต่position
จะตั้งค่าคุณสมบัติไว้ก่อน พวกเขายังทำงานแตกต่างกันขึ้นอยู่กับค่าตำแหน่ง
ตำแหน่ง: คงที่;
องค์ประกอบ HTML อยู่ในตำแหน่งคงที่โดยค่าเริ่มต้น
องค์ประกอบในตำแหน่งคงที่จะไม่ได้รับผลกระทบจากคุณสมบัติด้านบน ด้านล่าง ด้านซ้าย และด้านขวา
องค์ประกอบ with position: static;ไม่ได้ถูกจัดวางในลักษณะพิเศษใดๆ มันอยู่ในตำแหน่งตามกระแสปกติของหน้าเสมอ:
นี่คือ CSS ที่ใช้:
ตัวอย่าง
div.static {
position: static;
border: 3px solid #73AD21;
}
ตำแหน่ง: ญาติ;
องค์ประกอบที่มีposition: relative;อยู่ในตำแหน่งที่สัมพันธ์กับตำแหน่งปกติ
การตั้งค่าคุณสมบัติด้านบน ขวา ล่าง และซ้ายขององค์ประกอบที่ค่อนข้างวางตำแหน่งจะทำให้องค์ประกอบถูกปรับออกจากตำแหน่งปกติ เนื้อหาอื่นๆ จะไม่ถูกปรับให้พอดีกับช่องว่างที่เหลือโดยองค์ประกอบ
นี่คือ CSS ที่ใช้:
ตัวอย่าง
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
ตำแหน่ง: คงที่;
องค์ประกอบที่มีposition: fixed;อยู่ในตำแหน่งที่สัมพันธ์กับวิวพอร์ต ซึ่งหมายความว่าองค์ประกอบนั้นจะอยู่ในตำแหน่งเดิมเสมอแม้ว่าหน้าจะเลื่อนไปก็ตาม คุณสมบัติด้านบน ขวา ล่าง และซ้ายใช้เพื่อจัดตำแหน่งองค์ประกอบ
องค์ประกอบคงที่จะไม่ทำให้เกิดช่องว่างในหน้าซึ่งปกติจะตั้งอยู่
สังเกตองค์ประกอบคงที่ที่มุมล่างขวาของหน้า นี่คือ CSS ที่ใช้:
ตัวอย่าง
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;ตำแหน่ง: แน่นอน;
องค์ประกอบที่มีposition: absolute;อยู่ในตำแหน่งที่สัมพันธ์กับบรรพบุรุษที่มีตำแหน่งใกล้เคียงที่สุด (แทนที่จะเป็นตำแหน่งที่สัมพันธ์กับวิวพอร์ต เช่น คงที่)
อย่างไรก็ตาม; หากองค์ประกอบที่มีตำแหน่งสัมบูรณ์ไม่มีบรรพบุรุษที่มีตำแหน่งอยู่ องค์ประกอบนั้นจะใช้เนื้อหาของเอกสารและเลื่อนไปพร้อมกับการเลื่อนหน้า
หมายเหตุ:องค์ประกอบที่อยู่ในตำแหน่งสัมบูรณ์จะถูกลบออกจากการไหลปกติ และสามารถซ้อนทับองค์ประกอบได้
นี่เป็นตัวอย่างง่ายๆ:
นี่คือ 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;
}
ตำแหน่ง: เหนียว;
องค์ประกอบที่มีposition: sticky;จะถูกจัดตำแหน่งตามตำแหน่งการเลื่อนของผู้ใช้
องค์ประกอบแบบติดหนึบจะสลับระหว่างrelativeและfixedขึ้นอยู่กับตำแหน่งการเลื่อน มีตำแหน่งสัมพันธ์กันจนกว่าจะพบตำแหน่งออฟเซ็ตที่กำหนดในวิวพอร์ต จากนั้นจึง "เกาะติด" เข้าที่ (เช่น ตำแหน่ง:คงที่)
หมายเหตุ: Internet Explorer ไม่สนับสนุนการวางตำแหน่งแบบติดหนึบ Safari ต้องใช้ -webkit- นำหน้า (ดูตัวอย่างด้านล่าง) คุณต้องระบุอย่างน้อยหนึ่งรายการtop, หรือ สำหรับ rightการกำหนดตำแหน่งแบบติดหนึบในการทำงานbottomleft
ในตัวอย่างนี้ องค์ประกอบแบบติดหนึบจะติดอยู่ที่ด้านบนของหน้า ( top: 0) เมื่อคุณไปถึงตำแหน่งเลื่อน
ตัวอย่าง
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
การวางตำแหน่งข้อความในรูปภาพ
วิธีวางตำแหน่งข้อความบนรูปภาพ:
ตัวอย่าง
ลองด้วยตัวคุณเอง:
ตัวอย่างเพิ่มเติม
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |