Việc sử dụng vị trí CSS để bố trí các thành phần trên trang web của bạn có thể khó hiểu. Sự khác biệt giữa tuyệt đối, tương đối, cố định và dính là gì?
Để trợ giúp, hướng dẫn này sẽ hướng dẫn bạn qua tất cả các thuộc tính vị trí CSS. Và bạn sẽ có thể có được pixel bố cục trang web của mình một cách hoàn hảo
Vị trí CSS làm gì?Sử dụng CSS, bạn có thể bố trí tất cả các yếu tố trên trang web của mình một cách trực quan. Ví dụ: bạn có thể định vị một phần tử ở đầu trang của mình hoặc 50px bên dưới phần tử trước nó
Để kiểm soát cách một phần tử sẽ xuất hiện trong bố cục, bạn cần sử dụng thuộc tính CSS
.first {1. Ngoài ra, bạn có thể sử dụng một số thuộc tính liên quan đến vị trí khác.
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {2,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {3,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {4,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {5 và
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {6. [Chúng ta sẽ tìm hiểu thêm về những điều đó sau. ]
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Thuộc tính
.first {1 có thể nhận năm giá trị khác nhau.
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {8,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {9,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {0,
position: static;
} .another {
position: relative;
top: 50px;
}
.first {1 và
position: static;
} .another {
position: relative;
top: 50px;
}
.first {2
position: static;
} .another {
position: relative;
top: 50px;
}
Nghe có vẻ nhiều, nhưng đừng lo lắng
Đây là cách mỗi giá trị cho CSS
.first {1 hoạt động1. tĩnh
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {4 là giá trị mặc định mà một phần tử sẽ có. Điều này có nghĩa là nếu bạn không khai báo
position: static;
} .another {
position: relative;
top: 50px;
}
.first {1 cho một phần tử trong CSS, nó sẽ tự động được đặt thành
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {8
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Điều quan trọng cần lưu ý là có một vị trí tĩnh cũng giống như không đặt thuộc tính
.first {7. [Điều này sẽ phát huy tác dụng sau này với định vị tuyệt đối. ]
position: static;
} .another {
position: relative;
top: 50px;
}
Các phần tử được định vị tĩnh sẽ xuất hiện trên trang theo cách mà chúng tôi gọi là luồng thông thường. Ví dụ: nếu bạn có nhiều phần tử
.first {8 nối tiếp nhau, chúng sẽ xuất hiện trên trang ngay bên dưới nhau
position: static;
} .another {
position: relative;
top: 50px;
}
Đây là bản demo nhanh để minh họa vị trí tĩnh. Chúng tôi đang sử dụng đánh dấu HTML sau
.first {8
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và đây là CSS chúng tôi đang sử dụng
.first {
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Phần tử thứ hai có thuộc tính
.first {2 được đặt thành
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {10. Bạn sẽ nghĩ rằng điều này sẽ di chuyển nó xuống 50px, phải không?
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Tuy nhiên, đây là giao diện của nó trên một trang web
Vì cả hai phần tử đều có vị trí tĩnh, nên không có thuộc tính CSS bố cục nào sẽ làm bất cứ điều gì. Điều này làm cho thuộc tính
.first {2 đó không ảnh hưởng đến cách hiển thị phần tử thứ hai
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Vì vậy, phần tử thứ hai kết thúc ngay bên dưới phần tử đầu tiên, không có khoảng cách giữa
Làm thế nào chúng ta có thể khắc phục điều này?
2. Quan hệ.first {12 tương tự như
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {8 ở chỗ các phần tử được định vị tương đối sẽ tuân theo quy trình bình thường của trang web. Nhưng điểm khác biệt chính là việc sử dụng
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {9 giờ đây sẽ mở khóa các thuộc tính bố cục CSS khác
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Nghĩ về nó theo cách này. bạn đang đặt phần tử được định vị so với các phần tử khác trên trang
Hãy xem nó trông như thế nào và điều chỉnh CSS của chúng ta như thế này
.first {
position: static;
} .another {
position: relative;
top: 50px;
}
Tất cả CSS đều giống hệt nhau, ngoại trừ việc chúng tôi đã thay đổi phần tử thứ hai để sử dụng
.first {12. Làm điều này làm cho
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {16 hoạt động
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Bạn có thể thấy rằng phần tử thứ hai hiện thấp hơn phần tử thứ nhất 50px, hãy thêm khoảng cách giữa chúng
Các phần tử cha và con được định vị tương đốiHãy thử một ví dụ khác, sử dụng phần tử cha với phần tử con được lồng bên trong nó. Cả hai đều có bộ
.first {12
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Đây là HTML cho điều đó
.first {1
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và các kiểu CSS của chúng tôi
.first {1
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và đây là mã đó sẽ trông như thế nào trong cuộc sống thực
Bạn có thể thấy rằng phần tử con màu hồng được lồng độc đáo bên trong phần tử cha màu tím. Đứa trẻ cũng được định vị càng gần phía trên và để bên trong cha mẹ càng tốt. [Nó sẽ đi xa như văn bản gốc]
Vị trí tương đối là tương đối đơn giản, phải không?
3. tuyệt đối.first {19 sẽ khiến một phần tử bị loại bỏ khỏi quy trình bình thường đó của trang web
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Chờ đã, điều đó có nghĩa là gì?
Vì vậy, trước đây, sử dụng định vị tĩnh hoặc tương đối, các phần tử sẽ được hiển thị độc đáo bên dưới phần tử kia, tùy thuộc vào thứ tự của chúng trong phần đánh dấu HTML. Nhưng với định vị tuyệt đối, phần tử bị loại bỏ hoàn toàn khỏi toàn bộ luồng đó
Để giúp giải thích, chúng ta hãy so sánh để minh họa sự khác biệt giữa định vị tương đối và tuyệt đối
Trong ví dụ trước, chúng ta có một phần tử cha với một phần tử con, cả hai đều được định vị tương đối. Và phần tử con được lồng bên trong phần tử cha
Hãy thay đổi đứa trẻ đó để được định vị tuyệt đối trong cha mẹ
CSS của chúng ta bây giờ sẽ trông như thế này
.first {4
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Phần tử con màu hồng bây giờ trông rất khác so với ví dụ trước của chúng ta
Mặc dù nó vẫn nằm trong giới hạn của phần tử cha, nhưng nó được đặt ở trên cùng và rất bên trái của phần tử cha. Nó thậm chí còn che đi nội dung văn bản gốc
Điều này là do phong cách
.first {10 và
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {11 của đứa trẻ, kết hợp với việc đứa trẻ được định vị tuyệt đối. Trong dòng chảy bình thường của mọi thứ, các yếu tố sẽ không nằm trên [và che đậy] các yếu tố khác
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Nhưng vì phần tử con là tuyệt đối nên về cơ bản, nó nằm trên một lớp khác với các phần tử thông thường. Vì vậy, nó có thể được định vị trên đầu những gì khác trên trang web
Nhưng nó sẽ nằm trong ranh giới của phần tử cha - miễn là phần tử cha đã đặt vị trí của nó. Dẫn chúng ta đến điểm tiếp theo
Có một khía cạnh phức tạp khác đối với các phần tử con với vị trí tuyệt đối…
Một phần tử được định vị tuyệt đối cần định vị chính nó trong mối quan hệ với tổ tiên được định vịKhi bạn lấy một phần tử ra khỏi luồng thông thường bằng cách sử dụng
.first {19, nó sẽ tìm phần tử tổ tiên đã đặt vị trí riêng của nó. Điều này là để đứa trẻ biết nó nên định vị yếu tố nào trong mối quan hệ với
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Vậy điều gì sẽ xảy ra nếu một phần tử con được định vị tuyệt đối, nhưng phần tử cha không được đặt vị trí?
Đây là CSS của chúng tôi cho hình minh họa này
.first {8
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và đây là trang web kết quả sẽ trông như thế nào
Phần tử con hiện đã thoát khỏi giới hạn của phần tử cha, vì phần tử cha không có vị trí được đặt. Và đứa trẻ đã đi đến phần tử cha [ông] tiếp theo, trong trường hợp này là phần tử
.first {13, nó đi xa nhất có thể
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
[Một phép ẩn dụ hơi buồn là đứa trẻ “mồ côi” này đang tìm kiếm cây tổ tiên để tìm một người sẽ là “cha mẹ” của nó. ”]
Đây là một nguyên nhân lớn gây ra hành vi không mong muốn trong CSS đối với nhiều nhà phát triển
Nếu bạn có thể nhớ luôn đặt phần tử cha của phần tử con thành
.first {1 được đặt thành
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {9 hoặc
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {0 [trong hầu hết các trường hợp], bạn sẽ tránh được việc các phần tử con của mình bay lên trang không biết ở đâu 😊
position: static;
} .another {
position: relative;
top: 50px;
}
Vì vậy, để tóm tắt định vị tương đối và tuyệt đối
Sự khác biệt chính giữa định vị tương đối và tuyệt đối là
.first {17 sẽ loại bỏ hoàn toàn một phần tử con khỏi quy trình bình thường của tài liệu. Và phần tử con đó sẽ được định vị liên quan đến phần tử cha đầu tiên được đặt vị trí riêng
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Hai giá trị cuối cùng của
.first {1,
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {1 và
position: static;
} .another {
position: relative;
top: 50px;
}
.first {2, có một số điểm giống với
position: static;
} .another {
position: relative;
top: 50px;
}
.first {19. Nhưng chúng cũng liên quan đến vị trí cuộn của bạn trên trang
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Hãy cùng xem
4. đã sửa.first {42 sẽ đưa phần tử ra khỏi luồng thông thường và cũng đặt phần tử đó ở cùng một vị trí trong chế độ xem [những gì hiển thị trên màn hình]. Điều này có nghĩa là cuộn sẽ không ảnh hưởng đến vị trí của nó
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Hãy xem mã này trông như thế nào. Đây là HTML của chúng tôi
.first {9
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và trong CSS của chúng tôi, chúng tôi đã đặt phần tử thứ hai là
.first {42
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {1
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Đây là một Codepen để minh họa điều đó
Phần tử cố định màu xanh lá cây sẽ ở vị trí trên cùng và góc bên trái của chế độ xem. Và nếu bạn cuộn, phần tử màu tím sẽ cuộn lên bình thường, nhưng phần tử màu xanh lá cây sẽ vẫn bị kẹt ở vị trí chúng tôi đã định vị nó
Mẹo. Phần tử cố định phải được đặt vị trí
.first {44 hoặc
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}.first {45. Nếu không, nó sẽ hoàn toàn không tồn tại trên trang
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {42 thường được sử dụng để tạo các thanh điều hướng luôn được dán ở trên cùng. Đó là một tài sản siêu hữu ích
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Tiếp theo, chúng ta sẽ xem xét định vị cố định, giống như định vị cố định nhưng có thêm một chút
5. dínhCác phần tử
.first {47 ban đầu sẽ hoạt động giống như các phần tử
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {12, nhưng nếu bạn tiếp tục cuộn, chúng sẽ bị loại khỏi quy trình bình thường và hoạt động giống như
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {42 ở bất cứ nơi nào bạn định vị chúng
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Điều này có thể thực sự hữu ích nếu bạn muốn dán một phần tử mà ban đầu nằm ở phía dưới trang lên trên cùng của màn hình
Trong ví dụ mã này, chúng ta có phần tử dính màu xanh lục nằm giữa hai phần tử màu tím chứa nhiều văn bản. [Tất cả đều tốt hơn cho việc cuộn. ]
.first {8
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và CSS cho phần tử dính của chúng tôi
.first {0
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Và đây là giao diện trên trang web
Khi bạn cuộn xuống trang, khi bạn thấy phần tử màu xanh lá cây xuất hiện trong chế độ xem, nó có vẻ như là một phần tử bình thường, được định vị tương đối. Nhưng khi bạn tiếp tục cuộn, thay vì cuộn ra khỏi trang, nó sẽ cố định và dính vào đầu khung nhìn
Cũng giống như các phần tử cố định, một phần tử cố định phải có thiết lập
.first {2 hoặc
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
.first {4 trong CSS. Nếu không có nó, phần tử sẽ tiếp tục hoạt động như thể nó được định vị tương đối và sẽ không bao giờ trở nên dính
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
kết thúcMột lưu ý về hỗ trợ trình duyệt
Hiện tại,
.first {82 không có hỗ trợ toàn diện. Các phiên bản trình duyệt mới hơn hỗ trợ nó, nhưng không có phiên bản IE nào hỗ trợ. Điều này có thể quan trọng nếu bạn đang làm việc trên một dự án máy khách cần hỗ trợ IE 11. Bạn có thể kiểm tra hỗ trợ hiện tại trên CanIUse. com
// No position set, so it's static
} .another {
// No position set, so it's static top: 50px;
}
Tôi hy vọng rằng bạn thấy hướng dẫn này và các ví dụ mã về định vị CSS hữu ích. Nếu có bất kỳ thắc mắc hay phản hồi nào, đừng ngại để lại bình luận bên dưới nhé 😊