Thuộc Tính Position Trong Css

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

Bạn đang xem: Thuộc tính position trong css

*


*

Tên giá bán trịÝ nghĩa
staticDạng khoác định - đã hiển thị theo đú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í hoàn hảo và tuyệt vời nhất (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 vị trí tương đói theo thẻ phụ vương (thẻ khai báo relative) hoặc thẻ toàn thân nếu ko có khai báo
fixedĐịnh vị trí tương đối cho của sổ Browser của trình để mắ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 cha (thành phần bao ngoại trừ 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ó hoàn toàn có thể lăn cho tới bất kìvị trí nào, thậm chí nó hoàn toàn có thể lăn ra bên phía ngoài khung. Cùng để cấu hình thiết lập vị trí thì ta sử dụng bốn trực thuộc tính sau:

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

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


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

Giả sử có bố thẻ HTMLcấp 1, cấp 2, cấp 3, giả dụ thẻ cấp 3 là relative với thẻ cấp 2 cũng relative thì lúc này thẻ cấp 1 nếu như khai báo là absolute thì nò đang chọnkhunglà thẻ gồm khai báo relative ngay gần nó nhất cùng 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 với margin để triển khai bài này vẫn được nhưng rất phức tạp. Tuy vậy nếu thực hiện position và các thuộc tính hỗ trợ (top, left, bottom, right)thì nó quá 1-1 giản.

Xem thêm: Đánh Giá Chi Tiết Samsung Galaxy A5 2016 : Thiết Kế Bóng Bẩy, Camera Tốt

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

XEM DEMO

Lý vì là nó không tìm thấy thẻ thân phụ nào được khai báo relative cho nên nó sẽ mang 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à nổi bật nhất là kiến tạo menu nhiều cấp bởi CSS, tiếp nối là các hiệu ứng tooltip kết hợp với Hover.

Vì bài viết có hạn yêu cầu 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 tiếp theo.