Trong HTML, mặc định các thẻ được phân tích và hiển thị từ trái qua phải, từ trên xuống dưới. CSS được trang bị những thuộc tính left, top, right, bottom để chỉ định vị trí tương đối của thẻ, nhưng khi ở chế độ mặc định, việc chỉ định left, top, right, bottom không có tác dụng
<div style="background: red; left: 10px; top: 20px; width: 100px; height: 100px;"></div>
Đoạn mã này không dịch chuyển thẻ DIV lại vị trí 10px theo chiều ngang và 20px theo chiều dọc, nguyên do là vì thẻ DIV mặc định có position là static. Position đóng vai trò quan trọng trong việc dàn trang, chỉ định vị trí hiển thị thẻ như mong muốn, thuộc tính position có những loại giá trị sau:
Static
Hiển thị tuần tự, từ trái sang phải, từ trên xuống dưới. Đây là giá trị mặc định, không cần phải khai báo tường minh.
<input type="button" style="position: static;" value="Button 1"/>
<input type="button" value="Button 2"/>
<input type="button" style="position: static;" value="Button 3"/>
Relative
Tương tự như static, nhưng có thể sử dụng những thuộc tính left, top, right, bottom để chỉ định vị trí tương đối của thẻ so với thẻ phía trước / sau
<input type="button" value="Button 1"/>
<input type="button" style="position: relative; left: 100px;" value="Button 2"/>
<input type="button" value="Button 3"/>
Button 2 có vị trí lệch trái một khoảng cách 100px so với Button 1, Button 3 được hiển thị bình thường.
<input type="button" value="Button 1"/>
<input type="button" style="position: relative; right: 100px;" value="Button 2"/>
<input type="button" value="Button 3"/>
Button 2 có vị trí lệch phải một khoảng cách 100px so với Button 1, Button 3 được hiển thị bình thường.Nhưng chúng ta không thể sử dụng cùng lúc cả left và right:
<input type="button" value="Button 1"/>
<input type="button" style="position: relative; left: 100px; right: 100px;" value="Button 2"/>
<input type="button" value="Button 3"/>
Absolute
Có thể sử dụng những thuộc left, top, right, bottom để chỉ định vị trí tương đối của thẻ so với một đối tượng chứa (container), mặc định đối tượng chứa là khung nhìn mặc định (defaultView có thể hiểu nôm na là cửa sổ hiển thị tài liệu)
<div style="position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: red;"></div>
<div style="position: absolute; right: 150px; top: 70px; width: 100px; height: 100px; background: blue;"></div>
<div style="position: absolute; bottom: 0px; left: 50%; width: 100px; height: 100px; background: yellow;"> </div>
Xem ví dụ các bạn sẽ thấy mỗi "em" nằm "bơ vơ" một nơi. Hộp đỏ thì nằm về cạnh trái của khung nhìn, hộp xanh thì nằm về cạnh phải khung nhìn, hộp vàng thị chạy tuốt xuống cạnh dưới khung nhìn.
Absolute khác với relative ở chỗ, bạn có thể chỉ định 2 thuộc tính đồ trục cùng lúc, với điều kiện không chỉ định thuộc tính kích thước của trục đó, lấy ví dụ bạn tạo một hộp có vị trí left là 100 và right là 200 (cùng trục hoành, ngang) nhưng bạn không được phép đi kèm thêm thuộc tính width (định chiều ngang)
<div style="position: absolute; left: 50px; top: 100px; right: 200px; height: 100px; background: red;"></div>
<div style="position: absolute; left: 50px; top: 300px; right: 200px; width: 200px; height: 100px; background: green;"></div>
Ở dòng 2 sử dụng cả thuộc tính width, sẽ làm hiệu ứng không như mong đợi. Tương tự left, top bạn cũng có thể chỉ định đồng thời cả top và bottom nhưng không được kèm theo height.
Ta cũng có thể sử dụng cả 4 thuộc tính left, top, right, bottom cùng lúc để tạo một hộp có khoảng cách chỉ định đến 4 cạnh của khung nhìn.
<div style="position: absolute; left: 50px; top: 50px; right: 50px; bottom : 50px; background: red;"></div>
Dùng kết hợp Relative và Absolute
Khi một thẻ có thuộc tính là relative và absolute, thẻ đó sẽ trở thành khung nhìn / đối tượng chứa của những thẻ con bên trong nó. Điều này có nghĩa là, những thẻ con bên trong khi có thuộc tính position: absolute, sẽ lấy "mốc" left, top, right, bottom tính từ thẻ cha. Lấy ví dụ:
<div class="my-view" style="position: relative; width: 400px; height: 300px; border: 5px solid silver;">
<div style="position: absolute; left: 10px; top: 10px; width: 50px; height: 50px; background: green;"></div>
<div style="position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; background: red;"></div>
<div style="position: absolute; left: 10px; right: 10px; bottom: 10px; height: 50px; background: yellow;"></div>
</div>
Những hộp màu đỏ, xanh vàng, bây giờ có vị trí left, top, right, bottom tính từ các cạnh của hộp viền xám, hộp viền xám đã trở thành khung nhìn của những hộp con thay cho khung nhìn mặc định.
Z-Index
Giả sử ta có 2 hộp như sau:
<div style="background: red; left: 50px; top: 50px; width: 200px; height: 200px; position: absolute;"></div>
<div style="background: green; left: 70px; top: 70px; width: 100px; height: 100px; position: absolute;"></div>
Trong trường hợp này ta sẽ thấy hộp xanh nằm đè lên hộp đỏ, điều này là do hộp xanh có mã HTML nằm sau đoạn mã của hộp đỏ, nhưng nếu ta đảo ngược thứ tự mã HTML
<div style="background: green; left: 70px; top: 70px; width: 100px; height: 100px; position: absolute;"></div>
<div style="background: red; left: 50px; top: 50px; width: 200px; height: 200px; position: absolute;"></div>
Lúc này ta không thể thấy được hộp xanh nữa, do hộp đỏ đã che mất. Vậy ta chỉ có thể hiển thị một chồng (overlap) lên một thẻ khác dựa vào thứ tự HTML hay sao ? Tất nhiên là không, CSS đã trang bị cho ta một thuộc tính để quyết định sự ưu tiên hiển thị chồng giữa những thẻ sử dụng position: absolute, đó thuộc tính z-index. Z-Index là một giá trị kiểu số, chỉ định thứ tự hiển thị, thứ tự này sẽ được ưu tiên từ cao đến thấp, giá trị lớn hơn sẽ nằm đè lên giá trị nhỏ hơn, nếu 2 giá trị bằng nhau thì thứ tự hiển thị được quyết định bằng thứ tự đoạn mã HTML như bình thường
<div style="background: green; left: 70px; top: 70px; width: 100px; height: 100px; position: absolute;"></div>
<div style="background: red; left: 50px; top: 50px; width: 200px; height: 200px; position: absolute;"></div>
<div style="background: black; right: 70px; top: 70px; width: 100px; height: 100px; position: absolute; z-index: 1"></div>
<div style="background: brown; right: 50px; top: 50px; width: 200px; height: 200px; position: absolute;"></div>
Ở dòng 1, 2 không sử dụng thuộc tính z-index thì 2 hộp sẽ "đè" lên nhau dựa theo thứ tự và hộp xanh sẽ bị che mất bởi hộp đỏ.
Ở dòng 4,5 chúng ta có sử dụng z-index cho hộp đen, thì hộp đen sẽ đè lên hộp nâu dù rằng đoạn mã HTML của nâu nằm sau đen.
<div style="background: black; right: 70px; top: 70px; width: 100px; height: 100px; position: absolute; z-index: 1"></div>
<div style="background: brown; right: 50px; top: 50px; width: 200px; height: 200px; position: absolute; z-index: 1"></div>
Nhưng nếu cả 2 cùng có giá trị z-index bằng nhau thì việc "sống còn" dựa vào thứ tự mã HTML.
Ứng dụng
Giá trị static của position gần như không có công dụng gì cả, ngoài việc nó là giá trị mặc định của tất cả các thẻ.
Riêng position:relative thường được sử dụng để tạo một khung nhìn chứa những thẻ con có position:absolute
Position:absolute thường sử dụng để tạo những hiệu ứng hiển thị chồng chéo, những thành phần hiển thị đè lên thành phần khác:
Trình đơn (menu)
Hộp thông tin (overlap box, description box)
 |
| Hộp màu đen nằm đè lên hình |
 |
| Khi di chuột lên một đoạn chữ / hình, chú thích hiện lên |
Những thành phần chồng lên nhau
 |
| Tạo hiệu ứng logo chồng lên nhau |
Hộp thoại (dialog) / Cửa sổ bung (popup)
Việc sử dụng position, còn dùng để canh chỉnh dàn trang, và còn nhiều, nhiều nữa.. tùy vào trí tưởng tượng của chúng ta.
Không có nhận xét nào:
Đăng nhận xét