Chúng ta đã biết cách thiết lập kích thước và trang trí các container.
Việc canh chỉnh và sắp xếp vị trí chính là bước tiếp theo để khiến
trang web của chúng ta trông gọn gàng và ngăn nắp. Hãy cùng
thảo luận về các thuộc tính position.
Các thuộc tính position trong CSS
Có 4 thuộc tính nổi tiếng có thể giúp chúng ta thay đổi vị trí và di chuyển các phần tử
HTML. Các thuộc tính này rất mạnh mẽ nên đã được người ta gọi chung là bộ tứ:
Tuy nhiên, để giữ cho nội dung văn bản HTML của chúng ta được sắp xếp trình tự,
các trình duyệt web luôn mặc định khóa cứng vị trí của các phần tử bằng position: static;.
Để giải phóng bộ tứ và chứng kiến tiềm năng của họ, chúng ta cần thay đổi giá trị của thuộc tính position.
Thuộc tính position có thể được sử dụng với một trong các giá trị sau:
- static (mặc định)
- fixed
- absolute
- relative
Đối với mỗi giá trị của thuộc tính position, bộ tứ nói trên sẽ hoạt động theo những cách khác nhau.
Vì vậy nên chúng ta sẽ tạo ra một vài phần thảo luận cho 3 giá trị cuối cùng của thuộc tính position
và xem bộ tứ hoạt động ra sao.
Sử dụng position: fixed;
Luật CSS position: fixed; sẽ nói với các trình duyệt web rằng, chúng ta muốn thiết lập vị trí
của phần tử HTML tương quan với khung hiển thị của trình duyệt web. Luật CSS này có một hiệu ứng phụ
đó là nó sẽ khiến cho phần tử HTML tách rời khỏi dòng hiển thị thông thường của trang và
không còn chiếm không gian hiển thị như bình thường nữa.
pinned.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Pinned Button</title> <link rel="stylesheet" href="pinned.css"> </head> <body> <button id="up">Pinned Button</button> <!-- These image is for testing purpose. They make the document long enough to be scrollable. --> <img class="img-responsive" src="https://s19.postimg.cc/cgsyns1qr/snow.jpg"> <img class="img-responsive" src="https://s19.postimg.cc/cgsyns1qr/snow.jpg"> <img class="img-responsive" src="https://s19.postimg.cc/cgsyns1qr/snow.jpg"> </body>
</html>
pinned.css
#up { font-size: 15px; width: 150px; height: 50px; color: White; background-color: Crimson; border: none; /* set position */ position: fixed; right: 20px; bottom: 10px;
} /* for testing purpose */
.img-responsive { width: 100%; height: auto;
}
Đây là cách thức mà đoạn code phía trên hoạt động:
- Đầu tiên, nút nhấn được tách khỏi dòng hiển thị thông thường của trang web. Vì vậy nên bạn để ý là hình ảnh sẽ xuất hiện ngay từ phần đầu trang chứ không có khoảng trống nào ở phía trên. Dường như là nút nhấn đó không hề tồn tại.
- Luật CSS
right: 20px;được áp dụng để thiết lập khoảng cách giữa
cạnh bên phải của nút nhấn
và cạnh bên phải của khung hiển thị của trình duyệt. - Luật CSS
bottom: 10px;được áp dụng để thiết lập khoảng cách giữa
cạnh bên dưới của nút nhấn
và cạnh bên dưới của khung hiển thị của trình duyệt.
Sử dụng position: absolute;
Luật CSS position: absolute; sẽ nói với các trình duyệt web rằng, chúng ta muốn
thiết lập vị trí của phần tử tương quan với container cha bao quanh phía bên ngoài phần tử.
Và điều kiện cần thêm là container ở bao quanh phía ngoài không sử dụng position: static;.
Chúng ta sẽ xem một trường hợp sử dụng đơn giản của absolute khi phác họa một thẻ sản phẩm
có gắn một nhãn sale-off nhỏ. Nhãn sale-off sẽ được canh chỉnh vị trí tương quan với container cha
chính là thẻ sản phẩm bao quanh bên ngoài.
sale.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Good price</title> <link rel="stylesheet" href="sale.css"> </head> <body> <div class="card"> <!-- some elements for product's information go here --> <span class="card-tag"></span> </div> </body>
</html>
sale.css
.card { width: 270px; height: 360px; background-color: WhiteSmoke;
} .card-tag { width: 110px; height: 40px; background-color: Tomato;
} /* positioning .card-tag */ .card { position: relative;
} .card-tag { position: absolute; right: 0px; top: 15px;
}
Trong trường hợp container cha ở phía bên ngoài có position: static, trình duyệt web
sẽ kiểm tra container tiếp theo bao quanh container cha, và cứ thế tiếp tục cho đến khi
tìm thấy một container vỏ bọc không phải là static, sau đó thực hiện canh chỉnh phần
tử ban đầu theo vị trí của container phù hợp đã tìm được.
Sử dụng position: relative;
Luật CSS position: relative; sẽ nói với các trình duyệt web rằng, chúng ta muốn thiết lập
vị trí của phần tử HTML tương quan với vị trí mặc định của chính nó. Không giống với 2 giá trị
fixed và absolute, giá trị relative không tách phần tử HTML khỏi dòng hiển thị
thông thường của trang web. Vì vậy nên giá trị này thường được sử dụng khi chúng ta muốn
thực hiện những chỉnh sửa nhỏ về vị trí của phần tử HTML ví dụ như di chuyển khoảng vài
px để cân bằng thiết kế.
Hãy xem xét ví dụ dưới đây. Nút nhấn thứ 2 có nội dung chữ bên trong được canh chỉnh lại một chút để trông cân bằng hơn.
relative.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Back to Top</title> <link rel="stylesheet" href="relative.css"> </head> <body> <button class="btn"> ^ Back to Top </button> <button class="btn"> <span class="btn-icon">^</span> <span class="btn-label">Back to Top</span> </button> </body>
</html>
relative.css
.btn { font-size: 15px; width: 150px; height: 50px; color: White; background-color: DodgerBlue; border: none; cursor: pointer;
} .btn-label { position: relative; left: 5px;
} .btn-icon { font-weight: bold; position: relative; top: 3px; left: -7px;
}
Bài viết về các thuộc tính position của chúng ta đến đây là kết thúc. Trong bài tiếp theo,
chúng ta sẽ nói về việc thiết lập phong cách hiển thị cho các nội dung chữ và xây dựng một
thanh điều hướng (1 cái đơn giản thôi 
).