คุณสมบัติCSS อันดับต้น ๆ
ตัวอย่าง
ตั้งค่าขอบด้านบนขององค์ประกอบ <div> ที่มีตำแหน่ง 50px ลงจากขอบด้านบนของบรรพบุรุษที่อยู่ในตำแหน่งที่ใกล้ที่สุด:
div {
position: absolute;
top:
50px;
border: 3px solid green;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติtop
นี้ส่งผลต่อตำแหน่งแนวตั้งขององค์ประกอบที่อยู่ในตำแหน่ง คุณสมบัตินี้ไม่มีผลกับองค์ประกอบที่ไม่มีตำแหน่ง
- ถ้าตำแหน่ง: สัมบูรณ์; หรือตำแหน่ง: คงที่; -
top
คุณสมบัติกำหนดขอบด้านบนขององค์ประกอบเป็นหน่วยด้านบน/ด้านล่างขอบด้านบนของบรรพบุรุษตำแหน่งที่ใกล้ที่สุด - ถ้าตำแหน่ง: ญาติ; -
top
คุณสมบัติทำให้ขอบด้านบนขององค์ประกอบเลื่อนขึ้น/ลงในตำแหน่งปกติ - ถ้าตำแหน่ง: เหนียว; -
top
คุณสมบัติทำงานเหมือนกับตำแหน่งของมันสัมพันธ์กันเมื่อองค์ประกอบอยู่ภายในวิวพอร์ต และเหมือนกับตำแหน่งที่ได้รับการแก้ไขเมื่ออยู่ภายนอก - ถ้าตำแหน่ง: คงที่; -
top
ทรัพย์สินไม่มีผล
ค่าเริ่มต้น: | รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.top="100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
top | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
ไวยากรณ์ CSS
top: auto|length|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
auto | Lets the browser calculate the top edge position. This is default | |
length | Sets the top edge position in px, cm, etc. Negative values are allowed. Read about length units | |
% | Sets the top edge position in % of containing element. Negative values are allowed | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ใช้คุณสมบัติด้านบนที่มีค่าลบและสำหรับองค์ประกอบที่ไม่มีบรรพบุรุษอยู่ในตำแหน่ง:
div.b {
position: absolute;
top: -20px;
border: 3px solid blue;
}
div.c {
position: absolute;
top: 150px;
border: 3px solid green;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การจัดตำแหน่ง CSS
การอ้างอิง CSS: คุณสมบัติด้านล่าง
การอ้างอิง CSS: เหลือคุณสมบัติ
การอ้างอิง CSS: คุณสมบัติที่ถูกต้อง
การอ้างอิง HTML DOM: คุณสมบัติด้านบน