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

Sử dụng nhà phát triển thuộc tính CSS Z-Index có thể xếp chồng các phần tử lên nhau. Z-Index có thể có giá trị dương hoặc âm

LƯU Ý - Nếu các phần tử trùng lặp không có chỉ mục z được chỉ định thì phần tử đó sẽ hiển thị được đề cập cuối cùng trong tài liệu

Ví dụ

Hãy xem một ví dụ về thuộc tính z-index -

Fortran was originally developed by a team at IBM in 1957 for scientific calculations...................

đầu ra

Sau đây là đầu ra cho đoạn mã trên -

Ví dụ

Hãy xem một ví dụ khác về thuộc tính z-index -

Demo

This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text. This is demo text.
This is demo text.

đầu ra

Sau đây là đầu ra cho đoạn mã trên -

div class=”hình ảnh”> img class=”logo” src=”img/img1. png” style=”vị trí. tuyệt đối”/> /div> div class=”image2”> img class=”android” src=”img/img2. png” style=”vị trí. tuyệt đối”/> /div>

(Tôi không biết cách làm cho mã của mình hiển thị nên tôi đã bỏ dấu ngoặc mở. ) Với mã trên, img2 sẽ nổi trên img1. Tôi tự hỏi làm thế nào để tách chúng khỏi chồng chéo?

Cảm ơn bạn

Ví dụ cuối cùng này cho thấy các vấn đề phát sinh khi trộn một số phần tử được định vị trong hệ thống phân cấp HTML đa cấp và khi các giá trị z-index được gán bằng cách sử dụng bộ chọn lớp

Hãy lấy ví dụ về một menu phân cấp ba cấp được tạo từ một số phần tử div được định vị. Các phần tử div cấp hai và cấp ba xuất hiện khi người dùng di chuột hoặc nhấp vào cha mẹ của họ. Thông thường, loại menu này được tạo bởi tập lệnh ở phía máy khách hoặc phía máy chủ, do đó, quy tắc kiểu được gán với bộ chọn lớp thay vì bộ chọn id

Nếu ba cấp menu trùng nhau một phần, thì việc quản lý xếp chồng có thể trở thành vấn đề

Menu cấp độ đầu tiên chỉ được định vị tương đối, vì vậy không có bối cảnh xếp chồng nào được tạo

Menu cấp hai được định vị tuyệt đối bên trong phần tử cha. Để đặt nó trên tất cả các menu cấp một, thuộc tính z-index được sử dụng. Vấn đề là đối với mỗi menu cấp hai, ngữ cảnh xếp chồng được tạo và mỗi menu cấp ba thuộc về ngữ cảnh của cha mẹ của nó.

Vì vậy, một menu cấp ba sẽ được xếp chồng lên nhau trong các menu cấp hai sau, bởi vì tất cả các menu cấp hai có chung giá trị chỉ mục z và các quy tắc xếp chồng mặc định được áp dụng

Để hiểu rõ hơn về tình huống, đây là hệ thống phân cấp ngữ cảnh xếp chồng

• Ngữ cảnh ngăn xếp gốc
  • CẤP ĐỘ 1
    • CẤP ĐỘ #2 (z-index. 1)
      • CẤP 3
      • …
      • CẤP 3
    • CẤP ĐỘ #2 (z-index. 1)
    • …
    • CẤP ĐỘ #2 (z-index. 1)
  • CẤP ĐỘ 1
  • …
  • CẤP ĐỘ 1

Có thể tránh được vấn đề này bằng cách loại bỏ sự chồng chéo giữa các menu cấp độ khác nhau hoặc bằng cách sử dụng các giá trị chỉ mục z riêng lẻ (và khác nhau) được chỉ định thông qua bộ chọn id thay vì bộ chọn lớp hoặc bằng cách làm phẳng cấu trúc phân cấp HTML

Ghi chú. Trong mã nguồn, bạn sẽ thấy các menu cấp hai và cấp ba được tạo từ một số phần tử div chứa trong một vùng chứa được định vị tuyệt đối. Điều này rất hữu ích để nhóm và định vị tất cả chúng cùng một lúc

<div class="lev1">
  <span class="bold">LEVEL #1span>

  <div id="container1">
    <div class="lev2">
      <br /><span class="bold">LEVEL #2span> <br />z-index: 1;

      <div id="container2">
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
        <div class="lev3"><span class="bold">LEVEL #3span>div>
      div>
    div>

    <div class="lev2">
      <br /><span class="bold">LEVEL #2span> <br />z-index: 1;
    div>
  div>
div>

<div class="lev1">
  <span class="bold">LEVEL #1span>
div>

<div class="lev1">
  <span class="bold">LEVEL #1span>
div>

<div class="lev1">
  <span class="bold">LEVEL #1span>
div>

div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

div.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
  border: 2px outset #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.lev2 {
  opacity: 0.9;
  width: 200px;
  height: 60px;
  position: relative;
  border: 2px outset #990000;
  background-color: #ffdddd;
  padding-left: 5px;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

div.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
  border: 2px outset #000099;
  background-color: #ddddff;
  padding-left: 5px;
}