CSS position คุณสมบัติ
- 上一页 pointer-events
- หน้าต่อไป @property
定义和用法
position 属性规定元素的定位类型。
รายละเอียด
นิยายนี้กำหนดระบบจัดตำแหน่งที่ใช้ในการจัดตั้งโครงสร้างองค์ประกอบ。องค์ประกอบทุกองค์ประกอบสามารถจัดตำแหน่งได้ แต่องค์ประกอบที่มีการจัดตำแหน่งคงที่หรือfixedจะสร้างกล่องชนิดblockไม่ว่าองค์ประกอบนั้นจะมีรูปร่างใดก็ตาม。องค์ประกอบที่มีการจัดตำแหน่งเฉพาะจะมีการย้ายตำแหน่งต่อเนื่องกับตำแหน่งปกติของมันในกระแสปกติ。
ดูเพิ่มเติมที่:
ตำรา CSSจัดตำแหน่ง CSS
คู่มือ HTML DOMตำแหน่ง
ตัวอย่าง
จัดตำแหน่ง h2 องค์ประกอบ:
h2
{
position:absolute;
left:100px;
top:150px;
}
ระบุวิธีการ CSS
position: static|absolute|fixed|relative|sticky|initial|inherit;
ค่ารายละเอียดของนิยาย
| ค่า | รายละเอียด |
|---|---|
| absolute |
สร้างองค์ประกอบที่มีการจัดตำแหน่งคงที่ และจัดตำแหน่งต่อเนื่องกับองค์ประกอบพ่อที่มีการจัดตำแหน่ง static แรก。 ตำแหน่งขององค์ประกอบถูกกำหนดโดยตัวเลข "left", "top", "right" และ "bottom"。 |
| fixed |
สร้างองค์ประกอบที่มีการจัดตำแหน่งคงที่ และจัดตำแหน่งต่อเนื่องกับหน้าต่างบราวเซอร์。 ตำแหน่งขององค์ประกอบถูกกำหนดโดยตัวเลข "left", "top", "right" และ "bottom"。 |
| relative |
สร้างองค์ประกอบที่มีการจัดตำแหน่งเฉพาะต่อเนื่องกับตำแหน่งปกติของมันในกระแสปกติ。 ดังนั้น，"left:20" จะเพิ่ม 20 พิกเซลไปที่ตำแหน่ง LEFT ขององค์ประกอบ。 |
| static | ค่าเริ่มต้น: ไม่มีการจัดตำแหน่ง องค์ประกอบจะปรากฏขึ้นในกระแสปกติ (ฝ่าต่อการระบุ top, bottom, left, right หรือ z-index) |
| inherit | กำหนดให้มีค่าจากองค์ประกอบพ่อที่เชื่อมโยงตำแหน่ง position ขององค์ประกอบ。 |
รายละเอียดเทคนิค
| ค่าเริ่มต้น: | static |
|---|---|
| เชื่อมโยง: | no |
| รุ่น: | CSS2 |
| JavaScript ระบุวิธีการ: | object.style.position="absolute" |
TIY ตัวอย่าง
- ตำแหน่ง: ตำแหน่งที่วัดตั้งเฉพาะ
- ตัวอย่างนี้แสดงวิธีการจัดตั้งที่ตั้งขององค์ประกอบต่อเนื่องกับตำแหน่งปกติขององค์ประกอบ。
- ตำแหน่ง: ตำแหน่งที่วัดตั้งคงที่
- ตัวอย่างนี้แสดงวิธีการจัดตั้งที่ตั้งด้วยค่าที่เป็นจำนวนเต็มสำหรับองค์ประกอบ。
- ตำแหน่ง: ตำแหน่งที่วัดตั้งคงที่
- ตัวอย่างนี้แสดงวิธีการจัดตั้งที่ตั้งขององค์ประกอบต่อเนื่องกับหน้าต่างบราวเซอร์。
- จัดตั้งรูปร่างขององค์ประกอบ
- ตัวอย่างนี้แสดงวิธีการจัดตั้งรูปร่างขององค์ประกอบ。องค์ประกอบนี้ถูกตัดทอดเข้าไปในรูปร่างนี้และแสดงออกมา。
- Z-index
- Z-index สามารถใช้เพื่อจัดตั้งที่ตั้งขององค์ประกอบหลังองค์ประกอบอื่น。
- Z-index
- 上面的例子中的元素已经更改了Z-index。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- 上一页 pointer-events
- หน้าต่อไป @property
