Position Absolute và Relative là gì?


Trong CSS, khi bạn di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần từ bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ bạn sử dụng margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.

Bạn đang đọc: Position Absolute và Relative là gì?

Vậy nếu như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.

Các giá trị của thuộc tính position

Hiện tại position tương hỗ cho 1 số ít giá trị như sau :

  • relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.
  • absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.
  • fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
  • static: Đưa phần tử về hiển thị theo kiểu mặc định.

Sau khi thiết lập một thành phần sử dụng position, tất cả chúng ta sẽ sử dụng thêm một số ít thuộc tính position để chỉnh sửa vị trí của nó và giá trị là số kèm theo đơn vị chức năng, có 4 thuộc tính position là :

  • top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.
  • bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.
  • left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.
  • right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.

Ví dụ về kiểu relative

Ở ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản.

[ codepen id = ” KwjJxm ” ]

Ví dụ về kiểu absolute

Với absolute, mình phải có một thành phần mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của thành phần mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa những thuộc tính position về giá trị là 0 thì nó vẫn nằm trong thành phần mẹ .

[codepen id=”LEKqJM”]

Ví dụ về kiểu fixed

Ở ví dụ này, mình sẽ tạo ra một cái list, sau đó đưa những mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn .
[ codepen id = ” LEKqXq ” ]

Lời kết

Thế tại sao mình lại lý giải cặn kẽ về position như vậy, nó quan trọng lắm sao ? Khá là quan trọng sau này, mà đơn cử là trước mắt ở phần sau mình sẽ bày cho bạn một vài kỹ thuật làm menu đổ xuống có phân cấp và trong đó sẽ sử dụng thuộc tính position rất nhiều và nó hiển thị tốt hay không là quan trọng bạn có thiết lập đúng kiểu position hay không. Và tương lai bạn còn dùng nhiều nữa nên hãy nắm rõ ngay từ giờ đây .

Source: https://mindovermetal.org
Category: Wiki là gì

Rate this post
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments