Vị trí CSS
CSS giúp bạn định vị phần tử HTML của mình. Bạn có thể đặt bất kỳ phần tử HTML nào ở bất kỳ vị trí nào bạn thích. Bạn có thể chỉ định xem bạn muốn phần tử được định vị tương ứng với vị trí tự nhiên của nó trong trang hay tuyệt đối dựa trên phần tử cha của nó Show
Bây giờ, chúng ta sẽ thấy tất cả các thuộc tính liên quan đến định vị CSS với các ví dụ – Định vị tương đốiĐịnh vị tương đối thay đổi vị trí của phần tử HTML so với vị trí thường xuất hiện. Vì vậy, "trái. 20" thêm 20 pixel vào vị trí TRÁI của phần tử Bạn có thể sử dụng hai giá trị top và left cùng với thuộc tính vị trí để di chuyển phần tử HTML đến bất kỳ đâu trong tài liệu HTML Khi bạn muốn thiết kế các bố cục phức tạp, bạn sẽ cần thay đổi luồng tài liệu điển hình và ghi đè các kiểu trình duyệt mặc định Bạn phải kiểm soát cách các phần tử hoạt động và được định vị trên trang Ví dụ: bạn có thể muốn xếp các thành phần cạnh nhau hoặc chồng lên nhau theo một cách cụ thể hoặc làm cho tiêu đề "dính" vào đầu trang và không di chuyển khi bạn cuộn lên và xuống trang Để thực hiện những điều trên và hơn thế nữa, bạn sẽ sử dụng thuộc tính 2 của CSSThuộc tính này nhận năm giá trị. 3, 4, 0, 1 và 2Trong bài viết này, chúng ta sẽ tập trung vào các giá trị 4 và 0Chúng ta sẽ xem tổng quan về cách chúng hoạt động, sự khác biệt của chúng với nhau và cách chúng được sử dụng kết hợp tốt nhất để đạt hiệu quả tối đa Bắt đầu nào Cách xem vị trí của các phần tử bằng Công cụ dành cho nhà phát triển ChromeMột công cụ hữu ích trong quy trình phát triển web giao diện người dùng của bạn là Công cụ dành cho nhà phát triển của Chrome Trong số nhiều thứ, bạn có khả năng xem mã HTML/CSS/JavaScript của bất kỳ trang web nào để hiểu các phong cách khác nhau hoạt động như thế nào Để xem vị trí của một phần tử trên trang web trên máy Mac, hãy nhấn 5 và nhấp đồng thời vào phần tử mong muốn. Trên máy Window, nhấp chuột phải vào phần tử bạn muốn chọnSau đó, một menu sẽ xuất hiện và từ đó chọn 6Công cụ dành cho nhà phát triển Chrome sẽ mở ra Chọn tab 7 và từ đó cuộn xuống phần tử 2 hoặc trong hộp tìm kiếm 9, nhập vào 2Vị trí mặc định của các phần tử HTML trong CSS là gì?Theo mặc định, thuộc tính 2 cho tất cả các phần tử HTML trong CSS được đặt thành 3. Điều này có nghĩa là nếu bạn không chỉ định bất kỳ giá trị 2 nào khác hoặc nếu thuộc tính 2 không được khai báo rõ ràng thì nó sẽ là 3Về mặt trực quan, tất cả các thành phần tuân theo thứ tự của mã HTML và theo cách đó, luồng tài liệu điển hình được tạo ra Các phần tử xuất hiện lần lượt – ngay bên dưới nhau, theo thứ tự của mã HMTL Các phần tử khối như 6 được xếp chồng lên nhau như thế này
Thuộc tính 2 không được khai báo trong đoạn mã trên và do đó nó trở lại mặc định là 8. Nó tuân theo thứ tự của mã HTMLBất cứ phần tử nào đến trước trong HTML đều được hiển thị trước và mỗi phần tử theo sau phần tử tiếp theo, tạo ra luồng tài liệu như tôi đã mô tả ở trên Trong mã của chúng tôi ở đây, div có văn bản "Một" được viết trước để nó được hiển thị đầu tiên trên trang. Ngay bên dưới hộp có dòng chữ "Hai" được hiển thị, vì nó cũng xuất hiện tiếp theo trong HTML, v.v. Vị trí mặc định này không có chỗ cho sự linh hoạt hoặc di chuyển các yếu tố xung quanh Điều gì sẽ xảy ra nếu bạn muốn di chuyển ô vuông đầu tiên sang bên trái của trang một chút – bạn sẽ làm điều đó như thế nào? Có các thuộc tính offset để làm như vậy, như 9, 30, 31 và 32Nhưng nếu bạn cố gắng áp dụng chúng trong khi hình vuông có vị trí tĩnh mặc định này được áp dụng cho nó, các thuộc tính này sẽ không làm gì và hình vuông sẽ không di chuyển Những thuộc tính này không ảnh hưởng đến 8Vị trí tương đối trong CSS là gì? 34 hoạt động giống như 35, nhưng nó cho phép bạn thay đổi vị trí của phần tửNhưng chỉ viết quy tắc CSS này sẽ không thay đổi bất cứ điều gì Để sửa đổi vị trí, bạn sẽ cần áp dụng các thuộc tính 9, 30, 31 và 32 đã đề cập trước đó và theo cách đó, chỉ định vị trí và mức độ bạn muốn di chuyển phần tửCác phần bù 9, 30, 31 và 32 đẩy thẻ ra khỏi vị trí được chỉ định, hoạt động ngược lạiThực tế, 9 di chuyển phần tử về phía dưới cùng của vùng chứa chính của phần tử. 30 đẩy phần tử về phía trên cùng của vùng chứa chính của phần tử, v.v.Bây giờ, bạn có thể di chuyển ô vuông đầu tiên sang trái bằng cách cập nhật CSS như thế này ________số 8Ở đây, hình vuông đã di chuyển 06 từ bên trái của vị trí được cho là theo mặc định 07 thay đổi vị trí của phần tử liên quan đến phần tử cha và liên quan đến chính nó và vị trí thường có trong luồng tài liệu thông thường của trang. Điều này có nghĩa là nó liên quan đến vị trí ban đầu của nó trong phần tử chaNó di chuyển thẻ dựa trên vị trí hiện tại của nó, so với vị trí thông thường của nó và so với các thẻ xung quanh mà không ảnh hưởng đến bố cục của chúng Sử dụng các giá trị bù trừ này và 34, bạn cũng có thể thay đổi thứ tự xuất hiện các thành phần trên trangHình vuông thứ hai có thể xuất hiện trên đầu hình vuông đầu tiên 3Thứ tự trực quan hiện đã bị đảo ngược, trong khi mã HTML vẫn giống hệt nhau Tóm lại, các yếu tố được định vị tương đối có thể di chuyển xung quanh trong khi vẫn ở trong luồng tài liệu thông thường Chúng cũng không ảnh hưởng đến bố cục của các yếu tố xung quanh Vị trí tuyệt đối trong CSS là gì?Nếu bạn cập nhật quy tắc CSS cho hình vuông đầu tiên thành quy tắc sau 0Bạn sẽ nhận được kết quả này Đây là hành vi bất ngờ. Hình vuông thứ hai đã hoàn toàn biến mất Nếu bạn cũng thêm một số thuộc tính bù đắp như thế này 5Chà, bây giờ hình vuông đã hoàn toàn từ bỏ cha mẹ của nó Các yếu tố được định vị tuyệt đối hoàn toàn bị loại bỏ khỏi luồng thông thường của trang web Chúng không được định vị dựa trên vị trí thông thường của chúng trong luồng tài liệu mà dựa trên vị trí của tổ tiên của chúng Trong ví dụ trên, hình vuông được định vị tuyệt đối nằm bên trong cha được định vị tĩnh Điều này có nghĩa là nó sẽ được định vị tương đối so với toàn bộ trang, có nghĩa là liên quan đến phần tử 09 – gốc của trangDo đó, tọa độ, 50 và 51, dựa trên toàn bộ trangNếu bạn muốn áp dụng tọa độ cho phần tử cha của nó, bạn cần định vị tương đối phần tử cha bằng cách cập nhật 52 trong khi vẫn giữ nguyên 53 1Mã này tạo ra kết quả dưới đây Vị trí tuyệt đối đưa các thành phần ra khỏi luồng tài liệu thông thường đồng thời ảnh hưởng đến bố cục của các thành phần khác trên trang Sự kết luậnHy vọng bây giờ bạn đã hiểu rõ hơn về cách thức hoạt động của định vị tương đối và tuyệt đối Nếu bạn muốn tìm hiểu thêm về HTML và CSS, bạn có thể lưu và làm việc với danh sách phát này trên kênh YouTube của freeCodeCamp Nó bao gồm các video để giúp bạn bắt đầu từ đầu và nó sẽ giúp bạn nắm bắt tốt các nguyên tắc cơ bản freeCodeCamp cũng cung cấp Chứng chỉ thiết kế web đáp ứng dựa trên dự án tương tác và miễn phí, đây là một nơi tuyệt vời để bắt đầu hành trình phát triển web giao diện người dùng của bạn Cảm ơn đã đọc và học tập vui vẻ QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Học một cái gì đó mới mỗi ngày và viết về nó Nếu bài viết này hữu ích, hãy tweet nó Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu CSS vị trí là gì?Thuộc tính CSS vị trí đặt cách một phần tử được định vị trong tài liệu . Các thuộc tính top , right , bottom và left xác định vị trí cuối cùng của các phần tử được định vị.
Vị trí tốt nhất trong CSS là gì?Việc định vị tuyệt đối là tốt nhất nếu bạn cần thứ gì đó được đặt tại một tọa độ chính xác . Định vị tương đối sẽ lấy vị trí của phần tử và thêm tọa độ vào phần tử đó. Vì vậy, ví dụ nếu tôi có một phần tử
Vị trí tương đối trong CSS là gì?Chức vụ. quan hệ; . Đ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í tương đối và tuyệt đối trong CSS là gì?Chức vụ. tương đối đặt một phần tử so với vị trí hiện tại của nó mà không thay đổi bố cục xung quanh nó, trong khi vị trí. tuyệt đối đặt một phần tử so với vị trí của phần tử gốc và thay đổi bố cục xung quanh nó |