Position relative là gì
Thuộc tínhposition vào CSS dùng để xác xác định trí hiển thị mang đến thẻ HTML và thường xuyên được dùng để làm xây đắp CSS mang đến thực đơn đa cung cấp,tooltip hoặc một số công dụng khác.Position tất cả tổng cộng 5 gias trị nlỗi bảng dưới đâydẫu vậy vào bài này tôi chỉ trình bày hai nằm trong tính đó là relative cùng absolute.
Bạn đang xem: Position relative là gì
| static | Dạng mang định - đang hiển thị theo đúng sản phẩm từ của nó (thường xuyên dùng để làm diệt các thuộc tính bên dưới) |
| relative | Định địa chỉ tuyệt đối hoàn hảo (địa điểm bao ngoài), hôm nay những thẻ HTML bên phía trong đang coi nó là thẻ cha |
| absolute | Định địa chỉ tương đói theo thẻ thân phụ (thẻ khai báo relative) hoặc thẻ body giả dụ ko bao gồm khai báo |
| fixed | Định địa điểm tương đối mang đến của sổ Browser của trình chu đáo (Khi kéo scroll nó vẫn không bị ẩn đi) |
| inherit | Thừa tận hưởng những nằm trong tính tự nhân tố thân phụ (yếu tắc bao kế bên nó) |
1. Position relative và absolutetrong CSS
Ta hoàn toàn có thể ví relative sầu nlỗi một chiếc khungvới absolute là một hòn bi dịch chuyển bên phía trong dòng khung vì thế nó hoàn toàn có thể lnạp năng lượng tới bất kìđịa chỉ nào, thậm chí nó rất có thể lăn uống ra bên ngoài khung. Và nhằm tùy chỉnh thiết lập địa chỉ thì ta thực hiện tứ thuộc tính sau:
top: lên phía trênright: qua bên phảibottom: xuống phía dưới dướileft: qua mặt tráiquý khách chỉ hoàn toàn có thể áp dụng các duy nhất là 2 quý hiếm tiếp giáp nhau theo đúng tọa độ đề cát, những cặp đó là: (top,right) - (right, bottom) - (bottom, left) - (left,top).
Lưu ý: Vì các cực hiếm (top, left, right, bottom) ở trongtọa độ đề cát với trọng tâm đó là những một trong số những góc vuông (tùy vào phương pháp lựa chọn cặp)cần ví như nó đem số âm thì đối tượng HTML đã ở quanh đó form.
Giả sử bao gồm bố thẻ HTMLcung cấp 1, cấp 2, cung cấp 3, ví như thẻ cấp 3 là relative và thẻ cấp cho 2 cũng relative sầu thì từ bây giờ thẻ cấp 1 ví như knhì báo là absolute thì nò sẽ chọnkhunglà thẻ gồm knhì báo relative sầu sát nó duy nhất và thẻ kia đó là thẻ cấp cho 2.
Bài viết này được đăng tại
Ví dụ: Xây dựng HTML nlỗi hình sau:
XEM DEMO
Nếu chúng ta thực hiện float cùng margin để gia công bài này vẫn được mà lại khôn xiết phức tạp. Nhưng trường hợp sử dụng position và những trực thuộc tính hỗ trợ (top, left, bottom, right)thì nó thừa dễ dàng.
Xem thêm: Breakpoint Là Gì - Định Nghĩa, Ví Dụ, Giải Thích
HTML: Chúng ta chế tạo ra một thẻ div xung quanh thuộc cùng position của nó là relative sầu, còn ba ô bé dại phía bên trong ta cũng tạo thành 3 thẻ div cùng position của nó là absolute nê nó đang lấy thẻ div xung quanh cùnglàm size.
.relative height: 300px; width: 300px; position: relative; margin: 100px auto; background: blue;.absolute position: absolute; height: 40px; width: 40px;.red top: 200px; left: 100px; background: red;.yellow top: 100px; left: 200px; background: yellow;.white top: 150px; left: 250px; background: white;
Trường thích hợp họ không knhị báo thẻ ngoại trừ thuộc là relative thì giao diện vẫn tan vỡ nlỗi sau:
XEM DEMO
Lý bởi vì là nó không tìm thấy thẻ phụ thân như thế nào được khai báo relative cho nên nó vẫn lấy thẻ body toàn thân làm cho form.
2. Lời kết
Thuộc tính position được áp dụng tương đối nhiều với điển hình nổi bật độc nhất là xây dựng thực đơn đa cấp bằng CSS, tiếp đến là những cảm giác tooltip kết hợp với Hover.
Xem thêm: Các Mã Cổ Phiếu Nên Đầu Tư Nên Biết, Năm 2022 Nên Đầu Tư Vào Cổ Phiếu Những Ngành Nào
Vì nội dung bài viết hạn chế đề xuất bản thân sẽ không còn gửi thêm ví dụ nữa mà sẽ phân tích hơn nghỉ ngơi những bài thực hành thực tế tiếp theo sau.
