Vị trí css: cố định

Các thuộc tính vị trí (top, bottom, left, right) thường được sử dụng chung với các thuộc tính vị trí để canh lề cho phần tử

Elemental section

bên dưới đây được canh lề trái 50px, phải lề 300px, phía trên 100px

div{
    position:absolute;
    left:50px;
    right:300px;
    top:100px;
}

Lưu ý. Các thuộc tính vị trí chỉ có tác dụng khi giá trị của thuộc tính vị trí tĩnh khác

ĐỊNH VỊ ĐỊNH VỊ

Vị trí cố định tức thời là khi ta kéo chuột lên, xuống, trái, phải thì phần tử vẫn hiển thị cố định một vị trí

Để thiết lập vị trí cố định cho phần tử, ta sử dụng thuộc tính vị trí với giá trị đã được cố định

Elemental section

bên dưới đây được thiết lập vị trí cố định và canh lề trái 50px, lề phải 250px, phía trên 100px

div {
    position: fixed;
    left:50px;
    right:250px;
    top:100px;
}

Vị trí TĨNH

Vị trí tĩnh là kiểu vị trí mặc định của phần tử

Một phần tử có kiểu định vị sẽ

• Không bị ảnh hưởng bởi giá trị của các thuộc tính vị trí (trên, dưới, trái, phải)
• Xuất hiện theo đúng thứ tự của nó trong đoạn mã HTML

Để thiết lập vị trí tĩnh cho phần tử, ta sử dụng thuộc tính vị trí với giá trị tĩnh

h2 {
    position:static;
}

Lưu ý. Vị trí tĩnh là kiểu vị trí mặc định của phần tử. Do đó, nếu bạn muốn thiết lập kiểu định vị tĩnh cho phần tử thì không cần thiết phải sử dụng thuộc tính vị trí

Vị trí TƯƠNG ĐỐI

Các đối tương vị trí là vị trí mà phần tử sẽ được hiển thị ở đâu so với vị trí cấm đầu của nó

Để thiết lập vị trí tương đối cho phần tử, ta sử dụng thuộc tính vị trí với giá trị là tương đối

.relative{
    position:relative; 
}

Khi sử dụng chung với các thuộc tính vị trí (top, bottom, left, right), nó sẽ được hiển thị ở một vị trí khác tương ứng với vị trí ban đầu của nó và đè lên các phần tử khác. Tuy nhiên, khoảng cách không gian vốn có giữa nó và các phần tử xung quanh vẫn được giữ nguyên (Xem lại ví dụ trên để hiểu rõ hơn)

Lưu ý Với kiểu vị trí tương đối

• Giữa đầu và cuối ta chỉ có thể sử dụng một thuộc tính
• Giữa trái và phải ta chỉ có thể sử dụng một thuộc tính

Vị trí TUYỆT ĐỐI

Vị trí tuyệt đối là vị trí mà phần tử sẽ được hiển thị ở đâu so với phần tử chứa nó

Phần tử chứa nó phải có kiểu định vị là. cố định, tuyệt đối, tương đối. Nếu phần tử chứa nó không thuộc 3 kiểu nêu trên, thì nó sẽ được xác định vị trí dựa trên phần tử gốc là

Để thiết lập vị trí tuyệt đối cho phần tử, ta sử dụng thuộc tính vị trí với giá trị là tuyệt đối

.relative{
    background-color: yellow;
    height:250px;
    width: 300px;
    position: relative;
    left:100px;
}
.absolute{
    background-color: blue;
    height:50px;
    width: 50px;
    position: absolute;
    left:200px;
    bottom:0px;
}

Lưu ý. Kiểu vị trí tương đối thường được sử dụng để làm phần tử chứa phần tử có kiểu vị trí tuyệt đối

Thiết lập kích thước tương đối đối với phần tử

Thông thường ta thiết lập kích thước cho phần tử bằng thuộc tính chiều rộng và chiều cao. Tuy nhiên, cách này chỉ dùng để thiết lập các kích thước cố định, đã biết trước (Ví dụ như chiều rộng là bao nhiu, chiều cao là bao nhiu)

Còn ở trường hợp, tôi muốn phần tử

• Hiển thị lề trên phần tử chứa nó 50px
• Hiển thị lề bên dưới của phần tử chứa nó 100px
• Hiển thị lề trái của phần tử chứa nó 70px
• Hiển thị lề phải của phần tử chứa nó 140px
• Toàn bộ phần còn lại là kích thước của nó

Vì thế ta phải làm như thế nào. ?

Trường hợp này hết sức đơn giản, ta chỉ sử dụng các thuộc tính vị trí như top, bottom, left, right mà không cần thiết phải sử dụng thuộc tính width và height

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ụ. liên quan đến. đã 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ó
• liên quan đến. 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í. liên quan đến

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

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í. liên quan đến;

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ự á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 ngoại tuyến 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