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 | ||||||||||||||||||||||
| |||||||||||||||||||||||||
clip | ใช้กำหนดการตัดส่วนต่างๆของวัตถุที่ไม่ต้องการออกไป rect (top, right, bottom, left) | auto shape | Default | ||||||||||||||||||||||
overflow | ใช้กำหนดว่าถ้าข้อมูลเกินขอบเขตที่กำหนดไว้ จะให้มีการจัดการอย่างไร | visible hidden scroll auto | Default ไม่แสดง มี scroll bar เลื่อนดูได้ จะมี scroll bar เลื่อนดูได้ | ||||||||||||||||||||||
vertical-align | ใช้กำหนดการจัดวางแนวตั้ง | ||||||||||||||||||||||||
| |||||||||||||||||||||||||
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 <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
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<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)
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 <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 (ข้อความนี้จัดแบบ Fixe)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)
Exampleclip
<img src="../images/tea.jpg" />
<img src="../images/tea.jpg" style="position:absolute; clip:rect(0px 80px 80px 0px)" />
Output<img src="../images/tea.jpg" style="position:absolute; clip:rect(0px 80px 80px 0px)" />
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>
Output1. 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
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL
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ดื่มชาเขียว<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
ดื่มชาเขียวเพื่อสุขภาพ (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<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>