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ị:

[divider]

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>

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>

[divider]

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>

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>


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>

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>

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>

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>

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>

Chú ý: sử dụng các cặp giá trị sau đây là vô nghĩa: left right hay top bottom

[divider]

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>

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Là một người đam mê tìm tòi khám phá trong công nghệ và sẵn sàng chia sẻ những gì mà mình biết.

Leave a Reply


7 − two =