Thuộc tính position
Thuộc tính position : xác định loại của phương pháp định vị trí cho thành phần.
Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top
<html>
<head>
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
}
</style>
</head>
<body>
<div>
<p>position</p>
</div>
</body>
</html>
Giả sử ta có 2 thành phần, với các thuộc tính định sẳn như trên, khi đó trình duyệt hiển thị:
position
position: relative;
Thuộc tính position: relative; : Định vị trí tương đối cho thành phần.
Vị trí tương đối phụ thuộc vào thành phần bao ngoài.
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: relative;
}
</style>
position
Vị trí mặc định của position là vị trí của thành phần bao ngoài.
Khi ta thêm giá trị left thì lập tức thành phần sử dụng position: relative; sẽ định vị trí dựa theo thành phần bao ngoài:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: relative;
left: -20px;
}
</style>
position
position: absolute;
Thuộc tính position: absolute; : Định vị trí tuyệt đối cho thành phần, khi sử dụng giá trị này thì vùng xử lý của thành phần sẽ phụ thuộc vào nội dung của thành phần.
Vị trí tuyệt đối phụ thuộc vào thành phần bao ngoài (thành phần định vị trí tương đối position: relative) hoặc theo cửa sổ trình duyệt.
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: absolute;
}
</style>
position
Vị trí mặc định của position là vị trí của thành phần bao ngoài.
Khi ta thêm giá trị left thì lập tức thành phần sử dụng position: absolute; sẽ định vị trí theo cửa sổ trình duyệt:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
}
p {
background: blue;
position: absolute;
left: -20px;
}
</style>
position
Nếu thành phần bao ngoài sử dụng thuộc tính position: relative; thì thành phần sử dụng position: absolute; bên trong sẽ định vị trí theo thành phần bao ngoài:
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
}
</style>
position
Ta có thể sử dụng các cặp giá trị sau đây để định vị trí cho thành phần:
left top
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
top: 30px;
}
</style>
position
left bottom
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
left: -20px;
bottom: -10px;
}
</style>
position
right top
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
right: 50px;
top: 30px;
}
</style>
position
right bottom
<style type="text/css">
div {
border: 1px solid red;
height: 100px;
position: relative;
}
p {
background: blue;
position: absolute;
right: 50px;
bottom: -10px;
}
</style>
position
Chú ý: sử dụng các cặp giá trị sau đây là vô nghĩa: left right hay top bottom
position: fixed;
Thuộc tính position: fixed; : Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.
<html>
<head>
<style type="text/css">
p.fixed {
background: blue;
position: fixed;
right: 40px;
top: 50px;
}
</style>
</head>
<body>
<div>
<p class="fixed">position fixed</p>
<p>text text text ...</p>
</div>
</body>
</html>