BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4
BCOMZ.COM
ซ่อมคอมพิวเตอร์นอกสถานที่ บางกะปิ 083 - 792 5426 เริ่มต้นที่ 500บาท/เครื่อง ให้บริการเฉพาะเขตพื้นที่ รามคำแหง บางกะปิ นวมินทร์ เสรีไทย ลาดพร้าวเฉพาะ บริเวณ จากเดอะมอลบางกะปิถึงโชคชัย 4

Position Relative กับการจัดตำแหน่งของ DIV CSS

หมวดหลัก: Blog Learning ฮิต: 213

Position Relative กับการจัดตำแหน่งของ DIV CSS

บทความวันที่ 18 ธันวาคม 2555

Position Relative คือ Attribute ในการจัดตำแหน่งของ CSS โดยมีคุณสมบัติคือ จะทำการจัดตำแหน่งโดยอิงจาก DIV ที่ห่อหุ้มตัวมันอยู่

 

ภาพรวมของ Position Relative

1. ใช้สำหรับการจัดตำแหน่งของ DIV ที่ต้องการ

2. ใช้รวมกับคำสั่ง left, right, top, bottom สำหรับการเคลื่อนตำแหน่งไปในทิศทางต่าง ๆ

 

ตัวอย่างโปรแกรม

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>amplysoft.com</title>
</head>
<body>
<style type="text/css">
#div1 {
    float:left;
    width:100px;
    height:100px;
    border:solid 2px red;
    text-align:center;
}
#div2 {
    float:left;
    width:65px;
    height:50px;
    border:solid 2px green;
    text-align:center;
    position:relative;
    top:10px;
    left:10px;
}
</style>
 
<div id='div1'><div id='div2'>top:10px<br/>left:10px</div></div>
 
</body>
</html>

 

ผลลัพธ์