ตำแหน่ง CSS คุณสมบัติ
ตัวอย่าง
วางตำแหน่ง <h2> องค์ประกอบ:
h2
{
position: absolute;
left: 100px;
top: 150px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติposition
ระบุประเภทของวิธีการกำหนดตำแหน่งที่ใช้สำหรับองค์ประกอบ (คงที่, สัมพัทธ์, สัมบูรณ์, คงที่หรือเหนียว)
ค่าเริ่มต้น: | คงที่ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.position="absolute" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
หมายเหตุ:ค่าsticky
นี้ไม่ได้รับการสนับสนุนใน Internet Explorer หรือ Edge 15 และเวอร์ชันก่อนหน้า
ไวยากรณ์ CSS
position: static|absolute|fixed|relative|sticky|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
static | Default value. Elements render in order, as they appear in the document flow | |
absolute | The element is positioned relative to its first positioned (not static) ancestor element | |
fixed | The element is positioned relative to the browser window | |
relative | The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position | |
sticky | The element is positioned based on the user's scroll position
A sticky element toggles between |
|
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
วิธีจัดตำแหน่งองค์ประกอบที่สัมพันธ์กับตำแหน่งปกติ:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
ตัวอย่าง
ตำแหน่งเพิ่มเติม:
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position:
absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การจัดตำแหน่ง CSS
การอ้างอิง HTML DOM: คุณสมบัติตำแหน่ง