Trang chủ
position: value;
với value:
+ static
+ relative
+ absolute
+ fixed
giải thích:
- static(tương đối): đây là định dạng mặc định, nó không làm ảnh hưởng đến cách hiển thị
- relative: định vị trí của NÓ với đối tượng chứa nó
ví dụ:
<style>
#parrent{
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
height: 150px;
}
#layer1 {
position: relative;
left:20px;
top: 20px;
width: 200px;
height: 100px;
background: red;
margin: 20px;
}
</style>
<div id="parrent">
<div id="layer1"> position: relative; </div>
</div>
#parrent{
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
height: 150px;
}
#layer1 {
position: relative;
left:20px;
top: 20px;
width: 200px;
height: 100px;
background: red;
margin: 20px;
}
</style>
<div id="parrent">
<div id="layer1"> position: relative; </div>
</div>
kết quả:
*Ghi chú: nếu bỏ position: relative; thì các giá trị left,rightn,top,bottom không còn hiệu lực
- absolute(tuyệt đối): đinh vị trí của NÓ với body hoặc với đối tượng có position: relative; chứa nó
ví dụ:
<style>
#parrent{
position: relative;
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
height: 150px;
}
#layer1 {
position: absolute;
left:20px;
top: 20px;
width: 200px;
height: 100px;
background: red;
margin: 20px;
}
</style>
<div id="parrent">
<div id="layer1"> position: relative; </div>
</div>
#parrent{
position: relative;
padding: 10px 10px 10px 10px;
border: 1px solid #ccc;
height: 150px;
}
#layer1 {
position: absolute;
left:20px;
top: 20px;
width: 200px;
height: 100px;
background: red;
margin: 20px;
}
</style>
<div id="parrent">
<div id="layer1"> position: relative; </div>
</div>
kết quả:
*Ghi chú: nếu không có thuộc tính position: relative; trong #parent thì toạ độ left,top sẽ được tính từ body
fixed cũng giống như absolute chỉ trừ: tọa độ luôn luôn được tính theo cửa sổ của trình duyệt
* do được tính từ tọa độ cửa sổ trình duyệt nên không bị ảnh hưởng bởi margin,padding của body
Tác giả:TG
Webmaster
http://phpbasic.com
