Position css là gì

     

Thuộc tínhposition vào CSS dùng để làm xác định vị trí hiển thị mang đến thẻ HTML và thường được dùng để làm xây dựng CSS mang lại menu nhiều 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 mình chỉ trình diễn hai trực thuộc tính đó là relative với absolute.

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

*


*

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

1. Position relative với absolutetrong CSS

Ta rất có thể ví relative như một cái khungvà absolute là một hòn bi di chuyển phía bên trong cái khung nên nó hoàn toàn có thể lăn cho 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. Và để thiết lập cấu hình vị trí thì ta sử dụng bốn nằm 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ỉ rất có thể sử dụng các nhất là 2 giá bán trị gần kề 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 giá trị (top, left, right, bottom) ở trongtọa độ đề cát và tâm đó là các trong những góc vuông (tùy vào phương pháp chọn cặp)nên nếu nó mang số âm thì đối tượng người dùng HTML đang nằm bên cạnh khung.

Giả sử có cha thẻ HTMLcấp 1, cấp 2, cấp 3, nếu thẻ cấp 3 là relative với 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ẻ tất cả khai báo relative ngay gần nó nhất với thẻ đó đó là thẻ cấp 2.

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


Ví dụ: thiết kế 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 nhưng lại rất phức tạp. Tuy vậy nếu áp dụng position và các thuộc tính bổ trợ (top, left, bottom, right)thì nó quá đối chọi giản.

Xem thêm: Bidding Documents Là Gì - Hồ Sơ Mời Thầu (Bidding Document) Là Gì

HTML: bọn họ tạo một thẻ div ngoại trừ cùng cùng position của nó là relative, còn cha ô nhỏ bên trong ta cũng chế tác 3 thẻ div và position của nó là absolute nê nó đang lấy thẻ div ko kể 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 họ không khai báo thẻ quanh đó cùng là relative thì hình ảnh sẽ vỡ lẽ như sau:

XEM DEMO

Lý do là nó không tìm kiếm thấy thẻ phụ vương nào được khai báo relative vì thế nó sẽ rước thẻ body toàn thân làm khung.

2. Lời kết

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

Xem thêm: Cuộc Sống Không Lường Trước Điều Gì, Người Yêu Cũ

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