Positioning

การจัดวางตำแหน่งวัตถุ

Property Description Values
top ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านบน auto
%
length
bottom ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านล่าง auto
%
length
left ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านซ้าย auto
%
length
right
ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านซ้าย auto
%
length
position ใช้กำหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ

ทั้ง relative absolute และ fixed กำหนดตำแหน่งด้วยการใช้ property left, top, right, และ bottom

static
relative
absolute
fixed Default

value description
static การจัดวางตามปกติที่เป็น default
relative การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และจะกำหนดตำแหน่งโดยนับจากจุดที่วัตถุนั้นๆอยู่
absolute การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และ่จะกำหนดตำแหน่งจากขอบของ container ที่บรรจุ วัตถุนั้นๆ
fixed การจัดวางที่กำหนดตำแหน่งจากขอบของ Window นั้นๆ
* ต้องกำหนดตำแหน่งทั้งในแนวตั้ง และแนวนอน
* ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ในตำแหน่งที่กำหนด (IE7)
clip
ใช้กำหนดการตัดส่วนต่างๆของวัตถุที่ไม่ต้องการออกไป
rect (top, right, bottom, left) auto
shape
Default
overflow
ใช้กำหนดว่าถ้าข้อมูลเกินขอบเขตที่กำหนดไว้ จะให้มีการจัดการอย่างไร visible
hidden
scroll
auto Default
ไม่แสดง
มี scroll bar เลื่อนดูได้
จะมี scroll bar เลื่อนดูได้
vertical-align
ใช้กำหนดการจัดวางแนวตั้ง

value description
baseline Default. The element is placed on the baseline of the parent element
sub ตัวห้อย
super ตัวยก
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element’s font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element’s font
length
% Aligns the element in a % value of the “line-height” property. Negative values are allowed
z-index
ใช้กำหนดลำดับของวัตถุ Default z-index คือ 0
ถ้าต้องการให้อยู่ด้านล่างกว่า กำหนดเป็น -1
ถ้าต้องการให้อยู่ด้านบนกว่า กำหนดเป็น 1 auto
number Default

Exampleposition:relative
นี่เป็นข้อความจัดวางตามปกติ<br />
<font style=”position:relative; left:-50px”>เลื่อนไปทางซ้าย 50px</font><br />
<font style=”position:relative; right:50px;”>เลื่อนไปทางซ้าย 50px</font><br>
<font style=”position:relative; left:50px;”>เลื่อนไปทางขวา 50px</font><br>
<font style=”position:relative; right:-50px;”>เลื่อนไปทางขวา 50px</font><br>
<font style=”position:relative; left:50px; color:blue”>เลื่อนไปทางขวา 50px </font>
<font style=”position:relative; left:20px; color:red”>เลื่อนไปทางขวา 20px</font>
<font style=”position:relative; top:-5px; color:green”>เลื่อนไปขึ้นบน 5px</font>

Output
นี่เป็นข้อความจัดวางตามปกติ
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px เลื่อนไปทางขวา 20px เลื่อนไปขึ้นบน 5px
Exampleposition:absolute
นี่เป็นข้อความจัดวางตามปกติ<br />
<font style=”position:absolute;left:200px; color:blue;background-color:#D5FFFF”>จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Absolute)</font>
<font style=”position:absolute; right:200px;color:red; background-color:#FFE1F0″>จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Absolute)</font>
Output
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Absolute)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Absolute)

 
Exampleposition:fixed
นี่เป็นข้อความจัดวางตามปกติ<br />
<font style=”position:fixed; bottom:20px;left:200px; color:blue; background-color:#D5FFFF”>จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed)</font>
<font style=”position:fixed; bottom:20px; right:200px; color:red; background-color:#FFE1F0″>จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)</font>
Output
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)
Exampleclip
<img src=”../images/tea.jpg” />
<img src=”../images/tea.jpg” style=”position:absolute; clip:rect(0px 80px 80px 0px)” />
Output

Exampleใส่ scrollbar ให้ <div> ด้วย overflow
<div style=”width:200px; height:80px; background-color:#C1E0FF;”>บทเรียน online<br />
1. HTML<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</div>
<br />
<br />
<div style=”width:200px; height:80px; background-color:#C1E0FF; overflow:scroll”>บทเรียน online<br />
1. HTML<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</div>
<br />
<br />
<div style=”width:200px; height:180px; background-color:#C1E0FF; overflow:scroll”>บทเรียน online<br />
1. HTML<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</div>
<br />
<br />
<div style=”width:200px; height:80px; background-color:#C1E0FF; overflow:hidden”>บทเรียน online<br />
1. HTML<br />
2. CSS<br />
3. XHTML<br />
4. JavaScript<br />
5. SQL
</div>
Output
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL

Examplevertical-align
ดื่มชาเขียว<img src=”../images/tea.jpg” />เพื่อสุขภาพ (Default = baseline)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:baseline” />เพื่อสุขภาพ (baseline)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:text-top” />เพื่อสุขภาพ (text-top)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:text-bottom” />เพื่อสุขภาพ (text-bottom)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:top” />เพื่อสุขภาพ (top)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:middle” />เพื่อสุขภาพ (middle)

ดื่มชาเขียว<img src=”../images/tea.jpg” style=”vertical-align:bottom” />เพื่อสุขภาพ (bottom)
H<span style=”vertical-align:sub”>2</span>O

4<span style=”vertical-align:super”>2</span> = 16
Output
ดื่มชาเขียวเพื่อสุขภาพ (Default = baseline)

ดื่มชาเขียวเพื่อสุขภาพ (baseline)

ดื่มชาเขียวเพื่อสุขภาพ (text-top)

ดื่มชาเขียวเพื่อสุขภาพ (text-bottom)

ดื่มชาเขียวเพื่อสุขภาพ (top)

ดื่มชาเขียวเพื่อสุขภาพ (middle)

ดื่มชาเขียวเพื่อสุขภาพ (bottom)

H2O

42 = 16
Example
<html>
<head>
</head>
<h2 style=”color:#00FFFF”>ดื่มชาเขียวเพื่อสุขภาพ</h2>
<img src=”../images/tea2.jpg” style=”position:absolute;left:0px;top:0px;z-index:-1″ />
<body>
</body>
</html>
Output