CSS chồng chéo nội dung

Bạn có một trang web, nhưng các hộp div không thẳng hàng. Điều này có thể xảy ra vì nhiều lý do, đặc biệt là khi bạn xem xét các vấn đề về vị trí với div từ trang web này sang trang web khác. Tương tự, các phần tử hộp có thể chồng lên nhau vì một vài lý do, từ lỗi định vị đến sự cố tràn và sự cố nổi đơn giản. Trong hầu hết các trường hợp, thay đổi nhanh chóng và dễ dàng đối với biểu định kiểu trang web của bạn sẽ khắc phục được sự cố

1. 1

   Thêm lề nếu các hộp hiện không có lề và chỉ chồng lên nhau một lượng nhỏ. Bạn có thể đặt lề chỉ ở một bên, chẳng hạn như bên trái, nếu bạn chỉ muốn sử dụng phần tử lề để đẩy phần tử hộp khác ra xa. Chẳng hạn, nếu div A và div B được đặt cạnh nhau và div B chồng lên nhau ở phía bên trái, bạn có thể sửa đổi biểu định kiểu của mình để thêm lề trái vào div A như sau

   một { chiều rộng. 100px; . 10px;

2. 2

   Tìm kiếm biểu định kiểu của bạn để biết các giá trị định vị có thể gây chồng chéo và thay đổi chúng. Nếu bạn đang sử dụng định vị tuyệt đối để sắp xếp các phần tử div của trang web, thì đó là cách miễn phí cho tất cả – bất kỳ phần tử nào cũng có thể chồng lên bất kỳ phần tử nào khác trên trang. Vì vậy, nếu bạn đặt div A rộng 100 pixel và 15 pixel từ trên cùng và bên trái của trang, thì div B sẽ cần phải cách ít nhất 115 pixel về bên trái để không chồng lên div A. Bạn có thể chỉ định vị trí từ trên cùng hoặc dưới cùng và từ bên phải hoặc bên trái

3. 3

   Đặt div có chiều rộng cụ thể và ẩn phần tràn. Điều này ngăn div vượt quá kích thước đã chỉ định và ngăn nội dung tràn ra ngoài, có thể nói như vậy. Ví dụ: nếu div A không có chiều rộng đã đặt và bạn đặt một hình ảnh lớn vào đó, div sẽ tự động mở rộng để chứa hình ảnh. Nếu bạn đặt chiều rộng, hình ảnh sẽ vẫn hiển thị bên ngoài các cạnh của div, nhưng div sẽ không mở rộng. Nếu bạn ẩn phần tràn, hình ảnh sẽ chỉ hiển thị trong ranh giới của div và sẽ không mở rộng phần tử. Chẳng hạn, để đặt div A rộng 200 pixel và không bị tràn, bạn sẽ sử dụng mã kiểu này

   một { chiều rộng. 200px; . ẩn giấu;

4. 4

   Sử dụng tùy chọn "float" để tự động xếp các hộp div cạnh nhau. Chẳng hạn, bạn muốn div A hoạt động như một thanh bên và div B để giữ nội dung của bạn – bạn có thể di chuyển cả hai div sang trái, do đó làm cho chúng căn chỉnh theo chiều ngang. Các phần tử div nổi sẽ không trùng nhau. Một ví dụ về hai phần tử nổi trông giống như thế này

   Sau khi đọc bài viết này, bạn sẽ có thể tạo các div chồng lên nhau bằng CSS. Với mục đích này, đầu tiên, chúng ta sẽ tìm hiểu về thuộc tính “position” và “z-index”

   Bắt đầu nào

   Thuộc tính “vị trí” CSS

   Trong HTML, bạn có thể đặt vị trí của các phần tử bằng cách sử dụng thuộc tính “vị trí”. Vị trí cuối cùng của một phần tử trên trang web được xác định bởi bên phải, bên trái, trên cùng, dưới cùng và kết hợp với các thuộc tính chỉ mục z

   cú pháp

   Cú pháp của thuộc tính vị trí là

   vị trí. giá trị

   Ở vị trí "giá trị", bạn có thể đặt các vị trí khác nhau của các phần tử như tuyệt đối, tương đối, cố định và cố định

   Thuộc tính CSS “z-index”

   Thuộc tính “z-index” được sử dụng để đặt thứ tự ngăn xếp của các phần tử. Phần tử có giá trị z-index lớn hơn được đặt trước các phần tử khác

   cú pháp

   Cú pháp của thuộc tính z-index như sau

   chỉ mục z. tự động . số

   Trong cú pháp đã cho ở trên, “auto” được sử dụng để đặt thứ tự theo phần tử cha, trong khi đối với trình tự thủ công, “số” được đặt làm giá trị của thuộc tính chỉ mục z

   Bây giờ, hãy chuyển sang ví dụ thực tế về việc tạo các div chồng chéo bằng CSS

   ví dụ 1. Chồng chéo Div thứ hai với Div đầu tiên

   Trong phần HTML, chúng ta sẽ tạo 2 div và gán tên class khác nhau là “div1” và “div2”

   HTML

   < nội dung >
   
   < div class="div1"></div>
   
   < div class="div2"></div>
   
   < /body >

   Bây giờ, chuyển đến CSS và làm theo hướng dẫn đã cho

   • Đặt giá trị của thuộc tính vị trí là “tuyệt đối” cho vị trí div1 chính xác vị trí bạn muốn
   • Điều chỉnh chiều cao và chiều rộng của div1 là “250px” và “300px”
   • Giá trị của chỉ số z được đặt là “1”
   • Đặt màu nền của div1 là “rgb(4, 3, 75)”

   CSS

   .div1{
   
   vị trí. tuyệt đối;
   
   chiều cao. 250px;
   
   chiều rộng. 300px;
   
   chỉ mục z. 1;
   
   nền. rgb(4, 3, 75);
   
   }

   đầu ra

   Div đầu tiên được đặt thành công. Bây giờ, chúng ta chuyển sang div thứ hai

   Để chồng lên div2, hãy làm theo hướng dẫn đã cho

   • Đặt giá trị của thuộc tính vị trí, chiều rộng và chiều cao của div2 giống như “div1”
   • Đặt giá trị của chỉ mục z là “2” để đặt nó trước div đầu tiên
   • Đặt màu nền khác cho div2 là “rgb(0, 204, 255)”
   • Đặt lề của div2 là “50px” làm giá trị lề trên và lề trái
   • Đặt độ mờ của div2 là “0. 7”

   CSS

   .div2{
   
   vị trí. tuyệt đối;
   
   chiều rộng. 300px;
   
   chiều cao. 250px;
   
   chỉ mục z. 3;
   
   nền. rgb(0, 204, 255);
   
   lề. 50px;
   
   độ mờ. 0. 7;
   
   }

   đầu ra

   Div2 chồng chéo thành công với div1

   Nếu bạn muốn đặt div1 trên div hai, bạn chỉ cần thay đổi giá trị của chỉ mục z. Hãy xem một ví dụ về điều này

   ví dụ 2. Chồng chéo Div đầu tiên với Div thứ hai

   Trong ví dụ này, chúng tôi sẽ thay đổi giá trị của z-index của cả hai div. Bên trong ". div1” của tệp CSS, đặt giá trị của thuộc tính “z-index” là “2”

   chỉ mục z. 2;

   Sau đó, trong phần “. div2”, đặt giá trị của thuộc tính “z-index” là “1”

   chỉ mục z. 1;

   Kết quả là div đầu tiên sẽ được đặt trước div thứ hai

   Chúng tôi đã biên soạn phương pháp đơn giản nhất để tạo hai div chồng lên nhau bằng CSS

   Phần kết luận

   Thuộc tính “vị trí” và “chỉ mục z” được sử dụng để tạo các div chồng chéo trong CSS. Theo mặc định, giá trị của chỉ mục z là 1, cho biết rằng div mới được tạo sẽ được đặt trước div hiện có. Tuy nhiên, bạn có thể chỉ định bất kỳ giá trị nào theo yêu cầu của mình để điều chỉnh trình tự chồng chéo. Trong bài viết này, chúng tôi đã cung cấp các phương pháp để tạo các Div chồng chéo bằng CSS

   Nội dung chồng chéo là gì?

   Các trường hợp chồng chéo nội dung có thể được chia thành hai nhóm; . construct overlap, where an unclear boundary exists between two constructs, and the second involves measurement overlap, where a measure is potentially contaminated with items that better assess a different construct.

   Tại sao nội dung của tôi bị chồng chéo trong HTML?

   Lý do cho các dòng chồng lên nhau khá đơn giản. Chiều cao dòng không đủ để chứa kích thước văn bản . Chẳng hạn, bạn đã "mã hóa cứng" kích thước phông chữ thông qua CSS nội tuyến nhưng không điều chỉnh chiều cao dòng.