Thuộc tính Position trong CSS

Dẫn nhập

Trong bài trước chúng ta đã cũng nhau tìm hiểu về ID, CLASS TRONG HTML & FLOAT TRONG CSS.

Ở bài này chúng ta sẽ cùng nhau tìm hiểu về thuộc tính position trong CSS.

---

Nội dung

Để đọc hiểu bài này, bạn nên có kiến thức về:

• TỔNG QUAN HTML CƠ BẢN
• TỔNG QUAN CSS CƠ BẢN
• CẤU TRÚC MODEL BOX TRONG CSS

Trong bài này, Kteam sẽ giới thiệu đến bạn 2 phần:

• Giới thiệu thuộc tính Position
• Các trường hợp của thuộc tính position

Các thao tác được thực hành trên project của bài trước, bạn có thể tải xuống project ở cuối bài ID, CLASS TRONG HTML & FLOAT TRONG CSS

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

---

Giới thiệu thuộc tính Position

Trong những bài trước, ta có thể thấy rõ khi thay đổi hoặc di chuyển một phần tử nào đó qua Model Box của nó thì các phần tử liền kề đều bị ảnh hưởng

Vậy câu hỏi đặt ra: "Làm thế nào để di chuyển một phần tử mà không ảnh hưởng đến các phần tử khác hoặc không làm thay đổi bố cục định sẵn của trang web mà bạn đã định ra?”

Giải pháp của vấn đề này chính là Position!

Thuộc tính Position chỉ định cách định vị vị trí của một phần tử như static (tĩnh), relative (tương đối), absolute (tuyệt đối), fixed (cố định), sticky (dính).

Cú pháp

Phần_tử_HTML{

         position: relative | fixed | absolute;

  }

Trong đó:

Các giá trị position có từng chức năng khác nhau như:

• static: là giá trị mặc định của position, các phần tử hiển thị theo thứ tự khi chúng xuất hiện trong bố cục trang web.
• absolute: phần tử được định vị tuyệt đối hoặc cố định phụ thuộc vào phần tử cha(không phải static) của nó
• relative: phần tử được định vị vị trí tương đối so với vị trí mặc định ban đầu của nó thông qua các thuộc tính phụ như top,right,bottom, left…
• fixed: phần tử được định vị vị trí tương đối so với cửa sổ trình duyệt.

Ngoài ra bạn có thể tham khảo thêm các thuộc tính position khác tại: 

https://www.w3schools.com/cssref/pr_class_position.asp

Điều chỉnh vị trị của phần tử được chỉ định thuộc tính position bằng 4 thuộc tính kèm theo:

Phần_tử_HTML{

   position: Giá_trị_position   ;

top (hoặc bottom): giá_trị ; 

right (hoặc left): giá_trị ;

  }

---

Các trường hợp của thuộc tính position

Để thực hiện lấy ví dụ phần này chúng ta thêm 1 thẻ div có class date chỉ ngày tháng vào trong class container

index.html

<div class="content">

      <h1 class="heading">HOWKTEAM BLOG</h1>

<div class="date"><h2>Ngày 12, tháng 10, năm 2018</h2></div>

Chỉ định position mốc cho class date ở style.css 

.date{
    position: static;
}

---

Thuộc tính position: relative

Với giá trị position là relative thì chúng ta có thể di chuyển vị trí của nó xung quanh vị trí ban đầu, lấy vị trí ban đầu làm mốc

Cách di chuyển của thuộc tính position relative được mô tả đơn giản theo sơ đồ bên dưới với khung đỏ là vị trí ban đầu của phần tử:

Ví dụ: 

Chỉ định vị trí tương đối của class date dịch sang trái 500px trong style.css

.date{
    color: blue;
    position: relative;
    left: 500px;
}

Kết quả:

 

---

Thuộc tính position: fixed

Với giá trị position là fixed thì sẽ lấy mốc là góc màn hình trình duyệt hiển thị, do đó khi bạn cuộn trang website xuống (dùng chuột scroll xuống) thì nó vẫn luôn nằm trên vị trí màn hình mà bạn quan sát

Ví dụ:

Chỉ định vị trí fixed của class date trong style.css

.date{
    color: blue;
    position: fixed;
    top: 0px;
    left: 0px;    
}

Kết quả:

      

Ngoài ra, bạn cũng có thể thấy việc ứng dụng thuộc tính position file ở các website khác như nút “Chiến Dịch” trong website Howkteam.com cũng là một Fixed element.

        

---

Thuộc tính postion: absolute

Với thuộc tính postion absolute thì sẽ lấy góc của phần tử cha có chứa thuộc tính position gần nhất là mốc.

Lưu ý: Giả sử thuộc tính top, left trong trường hợp absolute không có gì thay đổi so với fixed, nhưng nếu cuộn trang web xuống, bạn sẽ thấy class date ở trường hợp này nằm cố định tại góc màn hình và không di chuyển theo thao tác cuộn trang.

Ví dụ: (trong ví dụ đang xét phần tử cha là phần tử mang class= “content” hoặc class = “container”)

• Chỉ định thuộc tính absolute cho class date trong style.css

.date{
   color: blue;
   position: absolute;
   top: 0px;
   left: 0px;    
}

Kết quả:

Tuy phần tử cha của class date là container và content, nhưng hai phần tử này chưa được chỉ định thuộc tính positon, vì vậy class date nhận vị trí của phần tử position relative gần nhất là thẻ body

• Cùng thử chỉ định position cho class container như sau:

.container{
   background-color: papayawhip;
   padding-top: 100px;
   width: 1140px;
   margin: 0 auto;
   position: relative;
}

Kết quả: 

• Thêm position: relative; cho content ta thu được:

---

Project tham khảo 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

---

Kết luận

Ở trong bài học này chúng ta đã được hướng dẫn kĩ càng về cách sử dụng Position trong CSS.

Trong bài học sau chúng ta sẽ cùng nhau HOÀN THIỆN BLOG & TỔNG HỢP KIẾN THỨC để bắt tay vào dự án thức tế được giới thiệu ở đầu khóa học.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách – Không ngại khó”.

 

---

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Thuộc tính Position trong CSS dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

 

---

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.