Vị trí: cố định css

Các thao tác được thực hiện trên dự án của bài viết trước, bạn có thể tải xuống dự án ở cuối bài viết ID, LỚP TRONG HTML & FLOAT TRONG CSS

Lưu ý. Bài viết Mục đích tóm tắt nội dung thực hiện dự án & 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ả

Thuộc tính giới thiệu Vị trí

Trong những bài trước, ta có thể biết 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

In this question set up. "Làm thế nào để 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 định dạng cục bộ sẵn có của trang web mà bạn đã định sẵn?"

Giải pháp cho vấn đề này chính là Vị trí

Thuộc tính Vị trí chỉ định cách xác định vị trí của một phần tử như tĩnh (tĩnh), tương đối (tương đối), tuyệt đối (tuyệt đối), cố định (co định), dính (dính)

cú pháp

Phần_tử_HTML{

Chức vụ. quan hệ. đã sửa. tuyệt đối;

}

in which

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

• tĩnh. là giá trị mặc định của vị trí, các phần tử hiển thị theo thứ tự khi chúng xuất hiện trong trang web cục bộ
• tuyệt đối. phần tử được xác định vị trí tuyệt đối hoặc cố định phụ thuộc vào phần tử cha(không phải tĩnh) của nó
• quan hệ. phần tử được xác định vị trí tương ứng với vị trí ban đầu mặc định của nó thông qua các thuộc tính phụ như trên, phải, dưới, trái…
• đã sửa. phần tử được xác định vị trí tương ứng với cửa sổ duyệt

Ngoài ra bạn có thể tham khảo thêm các thuộc tính khác tại vị trí.  

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

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

Phần_tử_HTML{

Chức vụ. Giá_trị_vị trí   ;

trên cùng (hoặc dưới cùng). giá_trị ;

phải (hoặc trái). giá_trị ;

}

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

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

mục lục. html

      HOWKTEAM BLOG

Ngày 12, tháng 10, năm 2018

Chỉ định vị trí đầu cho ngày học ở kiểu. css

.date{
    position: static;
}

Thuộc tính vị trí. quan hệ

Với vị trí giá trị là tương đối, 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 việc

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

Ví dụ.  

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

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

Kết quả

Thuộc tính vị trí. đã sửa

Với vị trí giá trị là cố định thì sẽ lấy điểm khởi động là góc màn hình duyệt hiển thị, do đó khi bạn cuộn trang web xuống (dùng chuột cuộn 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í cố định của ngày học trong kiểu. css

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

Kết quả

Ngoài ra, bạn cũng có thể tìm thấy ứng dụng thuộc tính tệp định vị ở các trang web khác như nút “Chiến dịch” trong trang web Howkteam. com cũng là một yếu tố cố định

Thuộc tính vị trí. tuyệt đối

Với thuộc tính position absolute thì sẽ lấy góc của phần tử cha có chứa thuộc tính position nearest is a fire

Lưu ý. Giả sử thuộc tính trên cùng, còn lại trong trường hợp tuyệt đối không có gì thay đổi so với cố định, nhưng nếu cuộn trang web xuống dưới, bạn sẽ thấy ngày học trong trường hợp này được cố định ở góc màn hình và không di chuyển theo thao tác

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

• Chỉ định thuộc tính tuyệt đối cho ngày học trong kiểu. css

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

Kết quả

Tuy nhiên, phần tử cha của ngày tháng lớp là vùng chứa và nội dung, nhưng hai phần tử này không chỉ được xác định thuộc tính vị trí, vì vậy ngày lớp học nhận vị trí của vị trí phần tử tương đối gần nhất là thẻ body

• Cùng thử định vị trí cho lớp chứa như sau

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

Kết quả.  

• Thêm vị trí. quan hệ;

Project tham khảo

Nếu công việc thực hiện theo hướng dẫn không thể hiện ra các phần như mong muốn. Bạn cũng có thể tải xuống DỰ ÁN THAM KHẢO ở liên kết bên dưới.  

Kết luận

Ở trong bài học này, chúng tôi đã được hướng dẫn kỹ lưỡng hơn về cách sử dụng Vị trí 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ự kiế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. Vui lòng rút lại bình luận và đóng góp ý kiến ​​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 sợ khó”

Tài liệu

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 Vị trí thuộc tính trong CSS dưới dạng tệp PDF trong liên kết 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 tại mục thông tin kỹ thuật 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 gặp bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng 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 to get the support from the community