Thứ Bảy, 28 tháng 12, 2013
CSS định vị
Định vị có thể được khôn lanh đôi khi!
Yếu tố quyết định để hiển thị ở phía trước!
Các yếu tố có thể chồng lên nhau!
Định vị
Các thuộc tính CSS định vị cho phép bạn bố trí một phần tử. Nó cũng có thể đặt một yếu tố phía sau một, và chỉ định những gì sẽ xảy ra khi nội dung của một nguyên tố là quá lớn.
Các yếu tố có thể được định vị bằng cách sử dụng trên, dưới, trái, và đặc tính đúng. Tuy nhiên, những tài sản này sẽ không làm việc trừ khi tài sản được thiết lập vị trí đầu tiên. Họ cũng làm việc khác nhau tùy thuộc vào phương pháp định vị.
Có bốn phương pháp định vị khác nhau.
Định vị tĩnh
Các phần tử HTML được định vị tĩnh theo mặc định. Một yếu tố vị trí tĩnh luôn luôn định vị theo dòng chảy bình thường của trang.
Các yếu tố vị trí tĩnh không bị ảnh hưởng bởi trên, dưới, trái, và đặc tính đúng.
Định vị cố định
Một phần tử với vị trí cố định được vị trí tương đối so với cửa sổ trình duyệt.
Nó sẽ không di chuyển ngay cả khi cửa sổ được cuộn:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a
!DOCTYPE is specified.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
Thử nó cho mình »
 | Lưu ý: IE7 và IE8 hỗ trợ giá trị cố định nếu một DOCTYPE được quy định!. |
|---|
Cố định các yếu tố vị trí được lấy ra khỏi dòng chảy bình thường. Các tài liệu và các yếu tố khác hoạt động giống như các yếu tố vị trí cố định không tồn tại.
Cố định các yếu tố vị trí có thể chồng lên nhau các yếu tố khác.
Định vị tương đối
Một yếu tố vị trí tương đối là vị trí tương đối so với vị trí bình thường của nó.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
Thử nó cho mình »
Nội dung của các yếu tố tương đối vị trí có thể được di chuyển và chồng chéo các yếu tố khác, nhưng không gian dành cho các phần tử vẫn còn lưu giữ trong các dòng chảy bình thường.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_top">This heading is moved upwards according to its normal position</h2>
<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>
</body>
</html>
Thử nó cho mình »
Các yếu tố tương đối vị trí thường được sử dụng như các khối chứa các yếu tố hoàn toàn vị trí.
Định vị tuyệt đối
Một yếu tố vị trí tuyệt đối là vị trí tương đối so với các yếu tố đầu tiên mà cha mẹ có một vị trí khác hơn tĩnh. Nếu không có yếu tố được tìm thấy, khối chứa là <html>:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
Thử nó cho mình »
Yếu tố hoàn toàn vị trí được lấy ra khỏi dòng chảy bình thường. Các tài liệu và các yếu tố khác hoạt động giống như các yếu tố hoàn toàn vị trí không tồn tại.
Yếu tố hoàn toàn vị trí có thể chồng lên nhau các yếu tố khác.
Các yếu tố chồng chéo
Khi các yếu tố được đặt bên ngoài dòng chảy bình thường, họ có thể chồng lên nhau các yếu tố khác.
Tài sản z-index xác định thứ tự ngăn xếp của một phần tử (trong đó yếu tố nên được đặt ở phía trước, hoặc phía sau, những người khác).
Một yếu tố có thể có một ngăn xếp để tích cực hay tiêu cực:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Thử nó cho mình »
Một phần tử với ngăn xếp thứ tự lớn hơn luôn luôn là ở phía trước của một phần tử với một trật tự ngăn xếp thấp hơn.
| Lưu ý: Nếu hai yếu tố vị trí chồng lên nhau mà không có một z-index chỉ định, các yếu tố vị trí cuối cùng trong mã HTML sẽ được hiển thị trên đầu trang. |
|---|
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét