คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 17

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
 
valuedescription
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
baselineDefault. The element is placed on the baseline of the parent element
sub ตัวห้อย
super ตัวยก
topThe top of the element is aligned with the top of the tallest element on the line
text-topThe top of the element is aligned with the top of the parent element's font
middleThe element is placed in the middle of the parent element
bottomThe bottom of the element is aligned with the lowest element on the line
text-bottomThe 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

« Chapter 16
Chapter 18 »