Position trong CSS là gì? Giải thích 5 thuộc tính Position trong CSS

Create by : https://globalizethis.org

Nếu bạn đang học cách sử dụng CSS cho trang web của mình, bạn có thể sử dụng Position trong CSS để thiết kế layout của bạn trông thật đẹp mắt. Vậy, Position trong CSS là gì? Tino Group sẽ giải đáp giúp bạn cũng với những ví dụ trực quan bằng code và hình ảnh để bạn thấy luôn nhé!

Position trong CSS là gì?

Position trong CSS được sử dụng để định vị vị trí hiển thị của các phần tử thẻ HTML và thường sử dụng để xây dựng CSS cho menu nhiều cấp, tooltip và một số chức năng khác liên quan đến vị trí.

position-trong-css-la-gi

Các vị trí trong Position

Các vị trí trên 1 mặt phẳng như bạn đã biết gồm có 4 vị trí chính : trên, dưới, trái, phải tương ứng ta sẽ có những vị trí Position như sau :

  • Top – trên
  • Bottom – dưới
  • Left – trái
  • Right – phải

position-trong-css-la-gi

Tất nhiên, đây chỉ là những vị trí cơ bản nhất, khi thực hiện 1 layout, bạn sẽ phải căng chỉnh vị trí nhiều hơn nhiều bằng cách kết hợp cùng các thuộc tính Position trong CSS khác ví dụ như trong ảnh:

Bạn đang đọc: Position trong CSS là gì? Giải thích 5 thuộc tính Position trong CSS

Xem thêm :  Nghĩa Của Từ Wind Up Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích Từ Điển Anh Việt Wind Up

Position trong CSS là gì? Giải thích 5 thuộc tính Position trong CSS 3Để hiểu một cách trực quan hơn, bạn nên thực hành thực tế. Nếu bạn ngại code lại từ đầu, bạn hoàn toàn có thể truy vấn vào link này và thực hành thực tế chỉnh sửa những thông số kỹ thuật, vị trí của khối vuông nhé !
position-trong-css-la-gi

5 giá trị thuộc tính cơ bản của Position trong CSS

Thông thường tất cả chúng ta sẽ có 4 thuộc tính chính gồm có : static, relative, fixed và absolute. Ngoài ra bạn sẽ thấy thêm những thuộc tính như : sticky và 2 thuộc tính khá mê hoặc khác là initial, inherit .
Trong bài viết, Tino Group chỉ đào sâu trình làng về 5 thuộc tính : static, relative, fixed, absolute và sticky nhé !

  • Position static: vị trí/tĩnh mặc định của phần tử và bạn đặt đâu phần tử sẽ nằm ở đó.
  • Position relative: vị trí của phần tử sẽ tương đối so với vị trí tĩnh bạn đặt và khoản không gian xung quanh phần tử sẽ được giữ nguyên.
  • Position fixed: vị trí sẽ nằm cố định một chỗ, dù bạn có làm gì, phần tử vẫn nằm cố định 1 vị trí trên màn hình.
  • Position absolute: vị trí của phần tử sẽ được xác định từ padding của phần tử cha.
  • Position sticky: vị trí của phần tử sẽ được định vị khi người dùng sử dụng thanh cuộn.

Giải thích chi tiết các giá trị thuộc tính của Position trong CSS

Việc lý giải sơ bộ vẫn sẽ rất khó để hoàn toàn có thể hiểu và tưởng tượng ra. Sau đây, Tino Group sẽ lý giải chi tiết cụ thể từng giá trị thuộc tính cùng ví dụ minh họa để bạn hiểu rõ và thực hành thực tế luôn nhé !

Xem thêm :  Ghế Massage Hồng Ngoại Là Gì? Các Loại Ghế Massage Hồng Ngoại Tốt Nhất

Position static

Position static hay vị trí mặc định, đồng nghĩa tương quan với việc vị trí của thành phần này được xác lập theo quy tắc thường thì của những tài liệu .

Bạn sẽ không thể sử dụng các thuộc tính CSS như: Top, Bottom, Left, Right để thiết lập vị trí cho phần tử đó.

Code ví dụ :

This div element has {position: static};

Khi copy nhớ ghi nguồn : https://globalizethis.org nhé . Chúc bạn may mắn

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 *

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.