Thuộc tínhposition vào CSS dùng làm xác xác định trí hiển thị mang lại thẻ HTML với thường được dùng để làm xây dựng CSS mang đến menu đa cấp,tooltip hoặc một số tác dụng khác.Position có tổng số 5 gias trị như bảng dưới đâynhưng trong bài bác này bản thân chỉ trình bày hai trực thuộc tính chính là relative cùng absolute.

Bạn đang xem: Position relative là gì

*


*

Tên giá trịÝ nghĩa
staticDạng khoác định - đang hiển thị theo đúng thứ tự của chính nó (thường dùng để làm hủy những thuộc tính bên dưới)
relativeĐịnh vị trí tuyệt đối (vị trí bao ngoài), hôm nay các thẻ HTML phía bên trong sẽ coi nó là thẻ cha
absoluteĐịnh địa chỉ tương đói theo thẻ phụ thân (thẻ khai báo relative) hoặc thẻ toàn thân nếu ko gồm khai báo
fixedĐịnh vị trí tương đối cho của sổ Browser của trình chăm chút (khi kéo scroll nó sẽ không xẩy ra ẩn đi)
inheritThừa hưởng những thuộc tính tự thành phần phụ vương (thành phần bao bên cạnh nó)

1. Position relative và absolutetrong CSS

Ta hoàn toàn có thể ví relative như một cái khungvà absolute là 1 trong hòn bi di chuyển bên trong cái khung nên nó rất có thể lăn tới bất kìvị trí nào, thậm chí còn nó có thể lăn ra bên phía ngoài khung. Cùng để tùy chỉnh vị trí thì ta sử dụng bốn ở trong tính sau:

top: lên phía trênright: qua mặt phảibottom: xuống vùng dướileft: qua bên trái

Bạn chỉ có thể sử dụng nhiều nhất là 2 giá chỉ trị gần cạnh nhau tuân thủ theo đúng tọa độ đề cát, những cặp đó là: (top,right) - (right, bottom) - (bottom, left) - (left,top).


Lưu ý: Vì các giá trị (top, left, right, bottom) ở trongtọa độ đề cát và tâm đó là các một trong những góc vuông (tùy vào cách chọn cặp)nên nếu nó sẽ đem số âm thì đối tượng người dùng HTML vẫn nằm ko kể khung.

Giả sử có bố thẻ HTMLcấp 1, cấp 2, cấp 3, nếu như thẻ cấp 3 là relative và thẻ cấp 2 cũng relative thì từ bây giờ thẻ cấp 1 nếu khai báo là absolute thì nò sẽ chọnkhunglà thẻ bao gồm khai báo relative ngay sát nó nhất và thẻ đó đó là thẻ cấp 2.

Bài viết này được đăng trên


Ví dụ: kiến tạo HTML như hình sau:

XEM DEMO

Nếu họ sử dụng float cùng margin để triển khai bài này vẫn được cơ mà rất phức tạp. Tuy thế nếu thực hiện position và các thuộc tính bổ trợ (top, left, bottom, right)thì nó quá 1-1 giản.

HTML: bọn họ tạo một thẻ div bên cạnh cùng với position của chính nó là relative, còn cha ô nhỏ dại bên vào ta cũng sinh sản 3 thẻ div và position của nó là absolute nê nó vẫn lấy thẻ div ngoài cùnglàm khung.


.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 hợp bọn họ không khai báo thẻ ngoại trừ cùng là relative thì hình ảnh sẽ vỡ như sau:

XEM DEMO

Lý vày là nó không tìm kiếm thấy thẻ cha nào được khai báo relative nên nó sẽ mang thẻ toàn thân làm khung.

2. Lời kết

Thuộc tính position được sử dụng tương đối nhiều và điển hình nhất là desgin menu nhiều cấp bởi CSS, tiếp nối là những hiệu ứng tooltip kết hợp với Hover.

Xem thêm: Giải Bài 1 Trang 43 Toán 12 (Khảo Sát Sự Biến Thiên Và Vẽ Đồ Thị Của Các Hàm Số)

Vì nội dung bài viết có hạn cần mình sẽ không còn đưa thêm lấy ví dụ nữa mà sẽ nói rõ rộng ở những bài thực hành thực tế tiếp theo.