Việc bố trí vị trí các element của trang web không thuận lợi như mọi người thường nghĩ, rất nhiều thứ có thể trở nên phức tạp hơn rất đôi lúc trang web của bạn có khá nhiều element không giống nhau. Vì đó, điều cần thiết là phải biết cách áp dụng CSS để sắp xếp vị trí những element, từ bỏ đó cũng sẽ tiết kiệm thời gian code của bọn họ hơn.

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

Có vô số phương pháp / phương pháp khác nhau để sắp xếp các element với dàn trang web. áp dụng Bootstrap là 1 trong những cách tốt nhất và cấp tốc gọn, tuy vậy không phải toàn bộ các dự án đều áp dụng Bootstrap. Trong bài viết này, mình sẽ phân tích và lý giải một giữa những cách sắp xếp các element với CSS thuần: trực thuộc tính position. Ko kể ra chúng ta cũng có thể dùng nằm trong tính Display với những giá trị như flex, grid, inline-block ... Từ bây giờ mình đang chỉ nói tới thuộc tính position nhé !

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

Có 5 giá chỉ trị thiết yếu của position:

position: static | relative | absolute | fixed | stickyvà các thuộc tính có nhiệm vụ chỉnh sửa vị trí của element (mình call chúng là các thuộc tính Helper):

top | right | bottom | left | z-indexNote: các thuộc tính Helper không thể hoạt động nếu như ko khai báo trực thuộc tính position, hoặc với position: static.

z-index là gì?

Chúng ta có độ cao (height) với chiều rộng lớn (width) (x,y) là 2 chiều của element. Z đó là chiều sản phẩm công nghệ 3 của element. Một element hiện thị đè lên trên một element khác có nghĩa là giá trị z-index của chính nó đã được tăng. Z-index cũng không chuyển động với position: static hoặc khi không tồn tại thuộc tính position

*

Element càng ở trên thì z-index của chính nó càng cao.

Bây giờ bản thân sẽ nói tới các giá trị của thuộc tính position

1. Static

position: static là quý hiếm mặc định của position. Dù họ có khai báo chúng hay không thì các element sẽ tiến hành sắp xếp vị trí một giải pháp như bình thường trên trang web.

Chúng ta bao gồm một đoạn HTML sau:

body> div class="box-orange">div> div class="box-blue">div>body>Sau đó bọn họ tạo CSS và định nghĩa position mang đến chúng:

.box-orange // không khai báo position background: orange; height: 100px; width: 100px; .box-blue background: lightskyblue; height: 100px; width: 100px; position: static; // Khai báo "static"

*
Chúng ta rất có thể thấy cùng một kết quả trong cả 2 trường hợp

2. Relative

position: relative: Vị trí new của một element tương quan/ tương tác tới địa điểm mặc định của nó.

Với position: relative và các giá trị khác xung quanh static, bạn có thể dễ dàng đổi khác vị trí của chúng. Nhưng chỉ khai báo position: relative thôi không đủ, bọn họ cần mang lại việc kiểm soát và điều chỉnh vị trí của element bằng những thuộc tính helper.

Hãy dịch rời hình vuông color cam sang kề bên hình vuông màu xanh da trời nhé:

.box-orange position: relative; // bạn có thể di chuyển được element background: orange; width: 100px; height: 100px; top: 100px; // di chuyển xuống 100px trường đoản cú vị trí lúc đầu của nó left: 100px; // di chuyển sang cần 100px

*

Hình vuông color cam đã có dịch 100px xuống bên dưới bên bắt buộc so cùng với vị trí bình thường của nó.

Note: sử dụng position: relative cho một element thì vẫn không tác động tới vị trí của các element khác.

Xem thêm: Những Bộ Phim Hoạt Hình 3D Hay Nhất The Giới, Top Phim Hoạt Hình 3D Trung Quốc Hay Nhất 2022

3. Absolute

Với position: relative, một element được dịch rời tới một vị trí mới dựa trên ví trí thông thường của chủ yếu nó. Tuy nhiên, position: absolute sẽ dịch rời vị trí của nó tương xứng với thẻ phụ thân của nó.

Một element được khai báo với ở trong tính position: absolute đang được thải trừ khỏi luồng document (document flow). địa điểm mặc định của element sẽ là điểm bước đầu (top-left) của element cha. Nếu như nó không có bất kể thẻ cha nào thì thẻ document sẽ là cha của nó.

Vì position: absolute đã được thải trừ khỏi document flow, các element khác vị element được quan niệm position: absolute được coi là đã bị xóa khỏi trang web.

Mình sẽ thêm một div container có tác dụng thẻ phụ thân trong lấy ví dụ sau:

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

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

*

position: absolute gửi element về địa chỉ top-left của thân phụ nó.

Dường như là hình vuông màu xanh đã bị đổi thay mất. Nhưng thực sự là nó vẫn coi như hình vuông màu cam đã biết thành xóa, với nó bị đẩy lên vị trí ban sơ của hình vuông vắn màu cam.

Để minh chứng cho điều này, mình 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ờ chúng ta đã nhìn thấy hình vuông xanh.

Vị trí của một element absolute sẽ đối sánh tương quan với vị trí của cha nó nếu thẻ phụ thân được khai báo position khác xung quanh 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 phải của thẻ cha

*

4. Fixed

Giống như position: absolute, các element được khai báo với position này đang được loại trừ khỏi document flow. Chỉ khác là:

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

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