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

ตัวอย่างposition: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>

ผลลัพธ์ 
นี่เป็นข้อความจัดวางตามปกติ
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px เลื่อนไปทางขวา 20px เลื่อนไปขึ้นบน 5px 


ตัวอย่างposition: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>

ผลลัพธ์
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Absolute)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Absolute)




ตัวอย่างposition: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> 

ผลลัพธ์ 
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)


ตัวอย่งclip

<img src="../images/tea.jpg" />
<img src="../images/tea.jpg" style="position:absolute; clip:rect(0px 80px 80px 0px)" />

ผลลัพธ์

 

ตัวอย่างใส่ 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>

ผลลัพธ์

บทเรียน 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

ตัวอย่างvertical-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

ผลลัพํธ์

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

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

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

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

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

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

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

H2O

42 = 16

ตัวอย่าง

<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>

ผลลัพธ์