CSS ออกจาก พ ร็อพเพอร์ตี้
ตัวอย่าง
ตั้งค่าขอบด้านซ้ายขององค์ประกอบ <div> ที่จัดตำแหน่งเป็น 150px จากขอบด้านซ้ายของบรรพบุรุษที่อยู่ในตำแหน่งที่ใกล้ที่สุด:
div.c {
position: absolute;
left:
150px;
width: 200px;
height: 120px;
border: 3px solid
green;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติleft
นี้ส่งผลต่อตำแหน่งแนวนอนขององค์ประกอบที่อยู่ในตำแหน่ง คุณสมบัตินี้ไม่มีผลกับองค์ประกอบที่ไม่มีตำแหน่ง
- ถ้าตำแหน่ง: สัมบูรณ์; หรือตำแหน่ง: คงที่; -
left
คุณสมบัติกำหนดขอบด้านซ้ายขององค์ประกอบเป็นหน่วยที่ด้านซ้ายของขอบด้านซ้ายของบรรพบุรุษตำแหน่งที่ใกล้ที่สุด - ถ้าตำแหน่ง: ญาติ; -
left
คุณสมบัติกำหนดขอบด้านซ้ายขององค์ประกอบเป็นหน่วยไปทางซ้าย/ขวาของตำแหน่งปกติ - ถ้าตำแหน่ง: เหนียว; -
left
คุณสมบัติทำงานเหมือนกับตำแหน่งของมันสัมพันธ์กันเมื่อองค์ประกอบอยู่ภายในวิวพอร์ต และเหมือนกับตำแหน่งที่ได้รับการแก้ไขเมื่ออยู่ภายนอก - ถ้าตำแหน่ง: คงที่; -
left
ทรัพย์สินไม่มีผล
ค่าเริ่มต้น: | รถยนต์ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS2 |
ไวยากรณ์ JavaScript: | วัตถุ .style.left="100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
left | 1.0 | 5.5 | 1.0 | 1.0 | 5.0 |
ไวยากรณ์ CSS
left: auto|length|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
auto | Lets the browser calculate the left edge position. This is default | |
length | Sets the left edge position in px, cm, etc. Negative values are allowed. Read about length units | |
% | Sets the left 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;
left: -10px;
width: 100px;
height: 120px;
border: 3px solid blue;
}
div.c {
position: absolute;
left: 150px;
width: 200px;
height: 120px;
border: 3px solid green;
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: การจัดตำแหน่ง CSS
การอ้างอิง CSS: คุณสมบัติที่ถูกต้อง
การอ้างอิง CSS: คุณสมบัติด้านล่าง
การอ้างอิง CSS: คุณสมบัติด้านบน
การอ้างอิง HTML DOM: left property