Hướng dẫn css absolute position best practice - css vị trí tuyệt đối thực hành tốt nhất
Giới thiệuTrong bài viết này, bạn sẽ học cách sử dụng CSS Show CSS Kết xuất dòng chảyMột khái niệm quan trọng để hiểu định vị tương đối/tuyệt đối là dòng chảy. Ý tưởng chung là các yếu tố HTML đều chiếm một số không gian. Công cụ kết xuất trình duyệt của bạn luôn hiển thị mọi thứ theo kiểu giống như lưới, bắt đầu ở góc trên cùng bên trái và di chuyển liên tiếp về phía dưới bên phải cho đến khi nó thực hiện tất cả nội dung HTML của bạn. Nếu bạn đã từng có một kết nối internet chậm và xem những thứ lớn trên trang web sẽ đẩy mọi thứ ngay lập tức và xuống, thì đó thực chất là kết xuất dòng chảy. Bạn có thể thay đổi hành vi mặc định này bằng CSS Vị trí CSSCSS 0, v.v., vì nó thay đổi dòng chảy tự nhiên của trình duyệt.Đây là những giá trị có thể cho CSS
Hôm nay, chúng tôi sẽ chỉ nhìn vào Định vị tương đốiKhi bạn tạo ra một phần tử HTML
Cùng với 6, 7, 8 hoặc 9 Offset.Bạn có thể nghĩ về vị trí tương đối của người Viking như là: Liên quan đến nơi nó được định vị ban đầu. Trong trường hợp này, Quảng trường Xanh hiện là 0 và 1 về nơi nó ban đầu sẽ đến.Điều mà cũng đáng chú ý là chiều rộng và chiều cao của nó được bảo tồn trong lưới vuông. Điều đó có nghĩa là nó vẫn còn được coi là người khác trong dòng chảy của bố cục, nó chỉ bị ảnh hưởng. Định vị tuyệt đốiĐịnh vị tuyệt đối là một quy tắc CSS rất mạnh để di chuyển các phần tử HTML xung quanh. Đôi khi mang lại kết quả bất ngờ:
Quảng trường màu cam thực sự là thứ 13 trong số 25 hình vuông này (hình ở giữa lưới), nhưng có vẻ như nó là hình vuông cuối cùng! Kỳ dị. Sử dụng Phải, nhưng tại sao lại có tất cả các con đường lên đó ?! Tọa độ bắt nguồnQuảng trường màu cam được đặt ở tọa độ 0x, 0y (ví dụ: góc trên cùng bên trái). Chỉ cần kết xuất trình duyệt luôn bắt đầu ở góc trên cùng bên trái, các yếu tố Nhưng, bạn cũng có thể cung cấp cho nó các tọa độ nguồn gốc khác nhau
Trong ví dụ trên, phần tử cha ( 8) có quy tắc position: relative khiến hình vuông màu cam coi đó là nguồn gốc kết xuất của nó.Trong khi điều này có vẻ như hành vi không trực quan, nhưng nó thực sự có chủ ý! Cho phép điều này cung cấp cho bạn rất nhiều quyền kiểm soát đối với nơi/cách bạn sắp xếp các yếu tố HTML Sự kết luậnKhi bạn bắt đầu sử dụng Đó có phải là thực hành tốt để sử dụng vị trí tuyệt đối?Sử dụng định vị tuyệt đối là cứng nhắc hơn nhiều và gây khó khăn cho việc viết bố cục phản ứng tốt với việc thay đổi nội dung. Họ chỉ đơn giản là quá rõ ràng.. They're simply too explicit.
Khi nào bạn nên sử dụng CSS định vị tuyệt đối?Tuyệt đối. Vị trí tuyệt đối đưa tài liệu ra khỏi luồng tài liệu. Điều này có nghĩa là nó không còn chiếm bất kỳ không gian nào như những gì tĩnh và tương đối làm. Khi vị trí tuyệt đối được sử dụng trên một phần tử, nó được định vị hoàn toàn với tham chiếu đến cha mẹ gần nhất có giá trị tương đối vị trí.When position absolute is used on an element, it is positioned absolutely with reference to the closest parent that has a position relative value.
Điều gì xảy ra với vị trí tuyệt đối trong CSS?Định vị tuyệt đối Ngược lại, một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy;Do đó, các yếu tố khác được định vị như thể nó không tồn tại.Yếu tố định vị hoàn toàn được định vị so với tổ tiên được định vị gần nhất (tức là, tổ tiên gần nhất không tĩnh).an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static ).
Vị trí tốt nhất trong CSS là gì?Định vị tuyệt đối là tốt nhất nếu bạn cần một cái gì đó được đặt ở tọa độ chính xác.Định vị tương đối sẽ lấy ở nơi phần tử đã có và thêm tọa độ vào nó.Vì vậy, ví dụ nếu tôi có một phần tử bên trong A và tôi muốn thụt vào nó, tôi sẽ sử dụng tương đối với, nói, trái: 15;.absolute positioning is best if you need something the be placed at an exact coordinate. The relative positioning will take where the element already is, and add the coordinates to it. So for example if I have a
element inside of a and I want to indent it, I would use relative with, say, left:15; . |