Việc bố trí địa điểm các element của website ko thuận lợi như những người thường xuyên nghĩ về, đa số thiết bị rất có thể trlàm việc yêu cầu phức tạp rộng vô cùng nhiều lúc website của người sử dụng có nhiều element không giống nhau. Do đó, điều quan trọng là phải biết bí quyết áp dụng CSS nhằm bố trí địa điểm những element, tự kia cũng trở nên tiết kiệm ngân sách và chi phí thời hạn code của chúng ta rộng.

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

Có rất nhiều cách thức / cách thức khác nhau nhằm sắp xếp những element cùng dàn website. Sử dụng Bootstrap là một trong những bí quyết cực tốt và nkhô nóng gọn, tuy vậy không phải tất cả những dự án hầu như áp dụng Bootstrap. Trong nội dung bài viết này, bản thân vẫn lý giải một trong số những phương pháp thu xếp các element cùng với CSS thuần: ở trong tính position. Dường như chúng ta cũng có thể cần sử dụng trực thuộc tính Display với những quý giá nhỏng flex, grid, inline-block ... Hôm ni mình đã chỉ nói về thuộc tính position nhé !

CSS Position & những trực thuộc tính Helper

Có 5 giá trị chính của position:

position: static | relative | absolute | fixed | stickyvới những thuộc tính có trách nhiệm căn chỉnh địa điểm của element (mình Gọi chúng là những nằm trong tính Helper):

top | right | bottom | left | z-indexNote: những nằm trong tính Helper cần yếu vận động nếu như không knhì báo thuộc tính position, hoặc với position: static.

z-index là gì?

Chúng ta có chiều cao (height) và chiều rộng lớn (width) (x,y) là 2D của element. Z chính là chiều thứ 3 của element. Một element hiện lên đè lên trên một element không giống Tức là giá trị z-index của nó đã được tăng. z-index cũng không vận động với position: static hoặc lúc không có trực thuộc tính position

*

Element càng làm việc bên trên thì z-index của nó càng tốt.

Bây giờ bản thân đã kể đến các cực hiếm của trực thuộc tính position

1. Static

position: static là quý giá mặc định của position. Dù chúng ta bao gồm khai báo bọn chúng hay là không thì các element sẽ tiến hành thu xếp địa điểm một bí quyết nlỗi bình thường bên trên trang web.

Chúng ta có một đoạn HTML sau:

body> div class="box-orange">div> div class="box-blue">div>body>Sau kia họ tạo ra CSS cùng có mang position mang đến chúng:

.box-orange // Không knhì báo position background: orange; height: 100px; width: 100px; .box-xanh background: lightskyblue; height: 100px; width: 100px; position: static; // Knhì báo "static"

*
Chúng ta có thể thấy và một kết quả trong cả hai ngôi trường hợp

2. Relative

position: relative: Vị trí new của một element tương quan/ liên hệ tới địa chỉ mang định của nó.

Với position: relative sầu với các quý hiếm không giống quanh đó static, chúng ta cũng có thể tiện lợi chuyển đổi vị trí của bọn chúng. Nhưng chỉ khai báo position: relative sầu thôi chưa đủ, chúng ta nên đến sự việc kiểm soát và điều chỉnh địa điểm của element bởi những nằm trong tính helper.

Hãy di chuyển hình vuông vắn color cam sang trọng bên cạnh hình vuông màu xanh lá cây nhé:

.box-orange position: relative; // bạn có thể di chuyển được element background: orange; width: 100px; height: 100px; top: 100px; // dịch rời xuống 100px trường đoản cú địa điểm thuở đầu của chính nó left: 100px; // dịch rời sang trọng đề nghị 100px

*

Hình vuông color cam đã được dịch 100px xuống phía bên dưới mặt đề nghị so với địa chỉ thông thường của nó.

Note: Sử dụng position: relative cho một element thì sẽ không còn ảnh hưởng cho tới vị trí của các element khác.

Xem thêm: Kiến Thức Dầu Do Là Gì ? Top 2 Điều Bạn Cần Biết Về Dầu Diesel Xe Nâng

3. Absolute

Với position: relative, một element được di chuyển cho tới một địa điểm mới dựa vào ví trí thông thường của nó. Tuy nhiên, position: absolute đã dịch chuyển địa điểm của nó khớp ứng cùng với thẻ phụ thân của nó.

Một element được knhị báo với thuộc tính position: absolute sẽ tiến hành đào thải khỏi luồng document (document flow). Vị trí mang định của element vẫn là điểm ban đầu (top-left) của element phụ vương. Nếu nó không có bất kể thẻ phụ vương như thế nào thì thẻ document sẽ là phụ thân của chính nó.

Vì position: absolute đã có đào thải ngoài document flow, những element không giống bởi element được khái niệm position: absolute được xem là đã biết thành xóa sổ website.

Mình đã thêm một div container có tác dụng thẻ cha vào ví dụ sau:

body> div class="container"> div class="box-orange">div> div class="box-blue">div> div>body>Và biến đổi một ít về position của chúng:

.box-orange position: absolute; background: orange; width: 100px; height: 100px;

*

position: absolute đưa element về vị trí top-left của phụ vương nó.

Hình như là hình vuông vắn blue color đã biết thành biến mất. Nhưng thực sự là nó đang coi nhỏng hình vuông màu cam đã biết thành xóa, với nó bị đẩy lên vị trí ban đầu của hình vuông vắn màu cam.

Để chứng tỏ mang lại vấn đề đó, bản thân sẽ dịch hình vuông cam đi 5px:

.box-orange position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px;

*

Bây giờ đồng hồ bọn họ đã nhận thức thấy hình vuông vắn xanh.

Vị trí của một element absolute đang đối sánh với địa chỉ của thân phụ nó nếu như thẻ thân phụ được khai báo position khác ko kể static

.container position: relative; background: lightgray;.box-orange position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // dịch 5px đối với cạnh đề xuất của thẻ cha

*

4. Fixed

Giống như position: absolute, những element được khai báo với position này sẽ được vứt bỏ ngoài document flow. Chỉ khác là:

Vị trí của chúng CHỈ đối sánh tương quan cùng với thẻ Chúng không xẩy ra ảnh hưởng bươi scroll

Tại ví dụ tiếp theo, bản thân đã biến đổi position của hình vuông vắn cam thành fixed, với sẽ giải pháp lề bắt buộc 5px so với thẻ , không phải thẻ phụ vương của chính nó (container).

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *