Hiểu về thuộc tính position trong CSS – Khi bạn thiết kế các layout cho
website việc chuyển từ file thiết kế theo định dạng HTML (Hypertext Markdown
Language) bạn sẽ buộc phải sử dụng thuộc tính position trong CSS. Ví dụ như
làm thanh tính năng trên menu, header, v.v. Có thể hiểu nó là thuộc tính xác
định loại của phương pháp định vị trí cho thành phần.
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="398"
data-original-width="1200"
height="212"
src="https://blogger.googleusercontent.com/img/a/AVvXsEhR3zn0zdcC605jDMxuuFOh46XoDpoHN-FIBWU04qUG4EVDnyLmT3Gwmy2RHQLJZBQMC5HY8mRTM5SRCiM8O2JOj-bXw5pCL51wD8Iv4-XTp3Z3saMJ87Kxh8uKM31sK0OnrQzgbDaBIBC49stLUtArZoNTwMA8DKa7BjGxmjmZQ7I__I8M_QnCgPQSgjE=w640-h212"
title="position trong css"
width="640"
/>
Với thuộc tính position chúng ta có 5 giá trị chính cần biết:
Static: Đây được xem là giá trị hiển thị Position trong css một cách
mặc định (default), các thành phần sẽ nằm theo thứ tự của văn bản.
Relative: Định vị trí tuyệt đối cho các thành phần, không gây ảnh hưởng
tới vị trí ban đầu hay các thành phần khác.
Absolute: Giá trị này sẽ giúp định vị trí tuyệt đối cho thành phần theo
thành phần bao ngoài, hoặc ít nhất là theo cửa sổ trình duyệt. Fixed: Định vị
trí tương đối cho thành phần theo cửa sổ trình duyệt.
Fixed: Định vị và giúp cho phần tử luôn cố định một chỗ, ví dụ như khi
bạn scroll trình duyệt chẳng hạn, phần tử sẽ không thay đổi.
Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần
bao ngoài).
Trước hết hãy nói về thuộc tính position relative, absolute và các thuộc tính
cool ngầu khác
Thuộc tính Position Relative
Thuộc tính position: relative trong CSS giúp Định vị trí tuyệt đối cho
các thành phần. Ví dụ:
selector{position: relative;}
Nếu bạn sử dụng thuộc tính này thì sẽ phải sử dụng kèm theo với các thuộc tính
căn chỉnh tọa độ của thành phần (lưu ý: các giá trị của các thẻ này là chính
là đơn vị đo như px). Top: là cách trên, Bottom: là cách dưới,
Left: là cách trái, Right: là cách phải. Hãy cùng nhìn qua đoạn
code ví dụ sau đây:
>
><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Thuộc tính position trong CSS</title>
</head>
<style type="text/css" media="screen">
div {
padding: 40px;
margin: 20px;
width: 320px;
border: 2px solid red;
}
</style>
<body>
<div>Hiju Blog.</div>
<div class="relative">Hiju Blog.</div>
<div>Hiju Blog.</div>
</body>
</html>
Mọi người có thể test thử và thấy rằng các thẻ hiển thị đúng thứ tự, giờ ta có
thể thêm đoạn CSS vào class relative như sau:
>
>.relative {position: relative;
/Cach ben trai 260px/
left: 260px;
/Cach ben tren 290px/
top: 290px;
background-color: #e1ab22;
}