Vị trí tương đối và tuyệt đối trong CSS là gì?
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ì? Show Để 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. .first {2, .first {3, .first {4, .first {5 và .first {6. (Chúng ta sẽ tìm hiểu thêm về những điều đó sau. ) Thuộc tính .first {1 có thể nhận năm giá trị khác nhau. .first {8, .first {9, .first {0, .first {1 và .first {2 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 .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 .first {1 cho một phần tử trong CSS, nó sẽ tự động được đặt thành .first {8
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 Đâ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 Và đây là CSS chúng tôi đang sử dụng .first { Phần tử thứ hai có thuộc tính .first {2 được đặt thành .first {10. Bạn sẽ nghĩ rằng điều này sẽ di chuyển nó xuống 50px, phải không? 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 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ư .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 .first {9 giờ đây sẽ mở khóa các thuộc tính bố cục CSS khác 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 { 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 .first {16 hoạt động 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 Đây là HTML cho điều đó .first {1 Và các kiểu CSS của chúng tôi .first {1 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 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 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à .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 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 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 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ể (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 .first {9 hoặc .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 😊 Vì vậy, để tóm tắt định vị tương đối và tuyệt đối
Hai giá trị cuối cùng của .first {1, .first {1 và .first {2, có một số điểm giống với .first {19. Nhưng chúng cũng liên quan đến vị trí cuộn của bạn trên trang 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ó Hãy xem mã này trông như thế nào. Đây là HTML của chúng tôi .first {9 Và trong CSS của chúng tôi, chúng tôi đã đặt phần tử thứ hai là .first {42 .first {1 Đâ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ó
.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 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ử .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ư .first {42 ở bất cứ nơi nào bạn định vị chúng Đ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 Và CSS cho phần tử dính của chúng tôi .first {0 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 .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 kết thúc 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é 😊 Vị trí tuyệt đối và tương đối trong CSS là gì?Một phần tử có vị trí. tuyệt đối; . Tuy nhiên; . (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Vị trí tương đối trong CSS là gì?Chức vụ. liên quan đến; . Điều này có nghĩa là nó liên quan đến vị trí ban đầu của nó trong phần tử cha
Vị trí tuyệt đối trong CSS là gì?Phần tử được định vị tuyệt đối là phần tử có giá trị vị trí được tính là tuyệt đối hoặc cố định . Các thuộc tính top , right , bottom và left chỉ định độ lệch từ các cạnh của khối chứa phần tử. (Khối chứa là tổ tiên liên quan đến phần tử được định vị. )
Sự khác biệt giữa tương đối và tuyệt đối là gì?Thay đổi tuyệt đối cũng đề cập đến sự thay đổi trong chỉ số tính bằng điểm phần trăm, tôi. e. giá trị của chỉ tiêu ở kỳ 2 trừ đi ở kỳ 1. Thay đổi tương đối cũng đề cập đến sự thay đổi trong chỉ số theo tỷ lệ phần trăm, tôi. e. thay đổi tuyệt đối tính theo phần trăm giá trị của chỉ tiêu trong kỳ 1 |