Hãy nói về tài sản position
. Tôi biết những người mới bắt đầu tò mò về điều này. Đây là một câu hỏi tôi nhận được gần đây
Tôi còn khá mới với thiết kế web và chưa nắm được sự khác biệt trong việc định vị các phần tử. Tôi biết có
absolute
,fixed
vàrelative
. Có cái nào khác không?
Câu trả lời ngắn
Có hai nữa. static
, là mặc định và sticky
, là một thứ hoàn toàn lạ mắt. Vâng, tất cả những điều này chủ yếu khác nhau. Mỗi trong số chúng đều cực kỳ hữu ích và tất nhiên bạn nên sử dụng cái nào tùy thuộc vào kết quả mong muốn
câu trả lời dài hơn
Một khái niệm quan trọng cần hiểu trước tiên là mọi thành phần đơn lẻ trên trang web đều là một khối. Nghĩa đen là một hình chữ nhật pixel. Điều này rất dễ hiểu khi bạn đặt phần tử thành Bây giờ bạn đang hình dung mọi thành phần trang đơn lẻ dưới dạng một khối pixel, chúng ta có thể nói về cách định vị được sử dụng để đưa các khối pixel chính xác đến nơi bạn muốn. Đây là giá trị mặc định cho mọi thành phần trang đơn. Các phần tử khác nhau không có các giá trị mặc định khác nhau để định vị, tất cả chúng đều bắt đầu bằng Loại định vị này có lẽ là dễ gây nhầm lẫn và sử dụng sai nhất. Điều nó thực sự có nghĩa là “tương đối với chính nó”. Nếu bạn đặt Có hai điều khác xảy ra khi bạn đặt Một điều khác xảy ra là nó giới hạn phạm vi của các phần tử con được định vị tuyệt đối. Bất kỳ phần tử nào là con của phần tử được định vị tương đối đều có thể được định vị tuyệt đối trong khối đó. Điều này mang đến một số cơ hội mạnh mẽ mà tôi nói ở đây Đây là một kiểu định vị rất mạnh mẽ cho phép bạn đặt bất kỳ phần tử trang nào vào chính xác nơi bạn muốn. Bạn sử dụng các thuộc tính định vị Sự đánh đổi [và điều quan trọng nhất cần nhớ] về định vị tuyệt đối là các phần tử này bị xóa khỏi luồng các phần tử trên trang. Một phần tử có kiểu định vị này không bị ảnh hưởng bởi các phần tử khác và nó không ảnh hưởng đến các phần tử khác. Đây là một điều nghiêm túc cần xem xét mỗi khi bạn sử dụng định vị tuyệt đối. Việc sử dụng quá mức hoặc sử dụng không đúng cách có thể hạn chế tính linh hoạt của trang web của bạn Phần tử vị trí Điều này có thể được sử dụng cho một cái gì đó như thanh điều hướng mà bạn muốn luôn hiển thị bất kể vị trí cuộn của trang. Mối quan tâm với định vị cố định là nó có thể gây ra các tình huống trong đó phần tử cố định chồng lấp nội dung đến mức không thể truy cập được. Bí quyết là có đủ không gian để tránh điều đó và những thủ thuật như thế này Định vị dính thực sự độc đáo. Một phần tử display: block;
hoặc nếu phần tử đó ở cấp độ khối theo mặc định như width
và một position
0 và phần tử đó sẽ tôn trọng điều đó. Nhưng các phần tử là position
1, như position
2 theo mặc định, cũng là hình chữ nhật, chúng chỉ hiển thị trên trang theo cách khác, sắp xếp theo chiều ngang khi có thể.el {
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: inherit;
}
static
static
. Tĩnh không có nhiều ý nghĩa; . Lý do duy nhất bạn từng đặt một phần tử thành position
5 là để xóa mạnh một số vị trí đã được áp dụng cho một phần tử nằm ngoài tầm kiểm soát của bạn. Điều này khá hiếm, vì vị trí không xếp tầngrelative
position
7 trên một phần tử nhưng không có thuộc tính định vị nào khác [position
8, position
9, absolute
0 hoặc absolute
1], nó sẽ không ảnh hưởng gì đến vị trí của phần tử đó, nó sẽ chính xác như vậy nếu bạn để nó là position
5 Nhưng nếu bạn . Tôi chắc rằng bạn có thể tưởng tượng, khả năng dịch chuyển một phần tử xung quanh dựa trên vị trí thông thường của nó là khá hữu ích. Tôi thấy mình sử dụng điều này để sắp xếp các phần tử biểu mẫu nhiều lần có xu hướng không muốn xếp hàng theo cách tôi muốnposition
7 trên một phần tử mà bạn nên biết. Một là nó giới thiệu khả năng sử dụng absolute
5 trên phần tử đó, tính năng này không hoạt động với các phần tử được định vị tĩnh. Ngay cả khi bạn không đặt giá trị absolute
5, phần tử này giờ đây sẽ xuất hiện trên bất kỳ phần tử được định vị tĩnh nào khác. Bạn không thể chống lại nó bằng cách đặt giá trị absolute
5 cao hơn cho phần tử được định vị tĩnhabsolute
position
8, position
9, absolute
0 và absolute
1 để đặt vị trí. Hãy nhớ rằng các giá trị này sẽ liên quan đến phần tử cha tiếp theo với vị trí tương đối [hoặc tuyệt đối]. Nếu không có cha mẹ như vậy, nó sẽ mặc định sao lưu tất cả các phần tử fixed
3, nghĩa là nó sẽ được đặt tương đối so với chính trang đófixed
fixed
được định vị tương ứng với chế độ xem hoặc chính cửa sổ trình duyệt. Chế độ xem không thay đổi khi cửa sổ được cuộn, do đó, phần tử được định vị cố định sẽ ở đúng vị trí của nó khi cuộn trangsticky
sticky
sẽ chỉ nằm ở đó giống như một phần tử tĩnh, nhưng khi bạn cuộn qua nó, nếu phần tử cha của nó có chỗ trống [thường là. thêm chiều cao] phần tử cố định sẽ hoạt động như thể nó là fixed
cho đến khi phần tử gốc đó hết chỗ. Nghe có vẻ lạ khi nói như vậy, nhưng thật dễ dàng để xem những gì đang xảy ra trong bản demoÝ nghĩa tuyệt đối trong CSS là gì?
CSS tương đối và tuyệt đối là gì?
Sự khác biệt giữa tuyệt đối và cố định là gì?
Khi nào bạn nên sử dụng CSS định vị tuyệt đối?
Chủ Đề