Ngôn ngữ CSS - CSS Position
Nguyên lý hoạt động của position
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này.
Giả sử bạn muốn sắp xếp vị trí cho một tiêu đề . Nó sẽ được xem như một chiếc hộp như bên dưới:
Giả sử bạn muốn sắp xếp vị trí cho một tiêu đề . Nó sẽ được xem như một chiếc hộp như bên dưới:
Bây giờ bạn muốn nó có vị trí cách 100px từ lề trên của trang và 200px từ lề trái của trang, bạn có thể viết đoạn CSS như sau:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Kết quả sẽ được như sau:
Như bạn đã thấy, sự định vị bằng CSS là một công nghệ chính xác để định vị một thành phần. Nó dễ dàng hơn so với việc dùng bảng.
Thuộc tính này có tác dụng thiết lập loại phương thức định vị vị trí của thành phần.
Cú Pháp:
position: static|absolute|fixed|relative;
- static - Hiển thị theo thứ tự hiển thị bình thường. Đây là giá trị mặc định.
- relative - Định vị vị trí tuyệt đối cho thành phần.
- absolute - Định vị vị trí tuyệt đối cho thành phần theo thành phần bao ngoài nó (thành phần relative).
- fixed - Định vị vị trí tương đối cho thành phần theo cửa sổ trình duyệt.
1. Định vị trí static
Đây là vị trí mặc định cho các phần tử HTML. Nó luôn luôn định vị một phần tử theo dòng của trang.
Ví dụ:
<style>
p{
background-color: orange;
width: 200px;
padding: 10px;
position: static;
top: 15px;
left: 15px;
}
</style>
<body>
<p> Đoạn văn bản này được định vị trí tĩnh</p>
</body>
2. Định vị trí relative
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative.
Ví dụ:
<html>
<head>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>Tiêu đề này không định vị trí</h2>
<h2 class="pos_left">Tiều đề này được định vị trí bên trái so với thông thường </h2>
<h2 class="pos_right">Tiều đề này được định vị trí bên phải so với thông thường</h2>
<p>"left:-30px" Trừ 30 pixel từ vị trí trái ban đầu.</p>
<p> "left:30px" cộng 30 pixel từ vị trí trái ban đầu.</p>
</body>
</html>
3. Định vị trí Absolute
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ.
Ví dụ:
<html>
<head>
<style>
h2 {
position: absolute;
left: 150px;
top: 250px;
}
</style>
</head>
<body>
<h2>Tiêu đề này định vị trí tuyệ đối</h2>
<p> Tiêu đề đặt tọa độ (150,250).</p>
</body>
</html>
4. Định vị trí fixed
Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt.
Ví dụ:
html>
<head>
<style type="text/css">
p.fixed {
background: blue;
position: fixed;
right: 40px;
top: 50px;
}
</style>
</head>
<body>
<div>
<p class="fixed">Định vị trí fix fixed</p>
<p>text text text ...</p>
</div>
</body>
</html>
Layers
Layer là thuộc tính giúp ta đặt một thành phần này lên trên một thành phần khác. Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới. Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp.
#logo1 { position:absolute; top:70px; left:50px; z-index:1 }
#logo2 { position:absolute; top:140px; left:100px; z-index:2 }
#logo3 { position:absolute; top:210px; left:150px; z-index:3 }
#logo4 { position:absolute; top:280px; left:200px; z-index:4 }
#logo5 { position:absolute; top:350px; left:250px; z-index:5 }
Ví dụ: Tạo trang html sau
<html>
<head>
<title>Ví Dụ Về Layers</title>
<style>
#logo1 { position:absolute; top:70px; left:50px; z-index:1 }
#logo2 { position:absolute; top:140px; left:100px; z-index:2 }
#logo3 { position:absolute; top:210px; left:150px; z-index:3 }
#logo4 { position:absolute; top:280px; left:200px; z-index:4 }
#logo5 { position:absolute; top:350px; left:250px; z-index:5 }
</style>
</head>
<body>
<img id="logo1" src="images/h1.jpg" >
<img id="logo2" src="images/h2.jpg" >
<img id="logo3" src="images/h3.jpg" >
<img id="logo4" src="images/h4.jpg" >
<img id="logo5" src="images/h5.jpg" >
</body>
</html>
