z index trong css

z-index vô css sở hữu phương thức sinh hoạt là từng element bên trên trang web được hiển thị ngang và dọc từ 2 trục x và nó, hiển thị trật tự ông chồng lấn theo gót trục z. Nói giản dị và đơn giản hơn vậy thì z-index càng tốt thì element bại đứng trước và hiện thị lên bên trên.

z-index trong css
Credit: smashingmagazine

Ví dụ về z-index và positon

Chúng tớ sở hữu 3 khối greybluegold đều trực nằm trong thẳng một div sở hữu class topdev-demo. Vấn đề này hỗ trợ cho 3 khối nằm trong và một stacking context. Như vậy vô và một stacking context thì trật tự xấp xỉ tiếp tục tuân theo gót quy tắc: element này sở hữu z-index cao rộng lớn tiếp tục hiện thị lên bên trên. Nếu chưa xuất hiện một element này được set z-index thì trật tự tiếp tục dựa vào vào thứ tự động xuất hiện kể từ trước rời khỏi sau của DOM tree.

Bạn đang xem: z index trong css

<div class="topdev-demo">
  <div class="grey">
    <span>Grey</span>
  </div>
  <div class="blue">
    <span>Blue</span>
  </div>
  <div class="gold">
    <span>Gold</span>
  </div>
</div>
.topdev-demo {
  margin-left: 40px;
  margin-top: 40px;
}
.grey, .blue, .gold {
  width: 100px;
  height: 100px;
  color: black;
}
.grey {
  background: grey;
}
.xanh xao {
  margin-top: -40px;
  margin-left: 60px;
  background: blue;
}
.gold {
  margin-top: -40px;
  margin-left: 120px;
  background: gold;
}

Kết quả:

z-index trong css

Thử thêm thắt z-index vô 3 khối khiến cho khối grey hiện thị lên phía đằng trước, khối xanh xao đứng thân mật và khối gold đứng sau 2 khôi bại. Tuy nhiên các bạn cảnh báo là z-index chỉ mất tính năng với những element khi chúng ta chỉ định và hướng dẫn thêm thắt 3 độ quý hiếm  absolutefixed hay relative.

.grey {
  z-index: 3;
  position: relative;
}
.xanh xao {
  z-index: 2;
  position: relative;
}
.gold {
  z-index: 1;
  position: relative;
}

Kết quả:

z-index trong css

Nói cho tới đó là quá đầy đủ nhằm các bạn hiểu về z-index trong css  các tính chất đi kèm theo nhằm code. Còn mong muốn hiểu sâu sắc rộng lớn, chào các bạn lên đường tiếp xuống phần tiếp sau đây.

Tham khảo việc thực hiện mang lại lập trình sẵn CSS lương bổng cao bên trên Topdev.

Stacking Order

Đây là 1 trong trong mỗi yếu tố với z-index: Nó quá giản dị và đơn giản, thế cho nên đa số những developer sẽ không còn vứt thời hạn nhằm hiểu những rule của chính nó.

Xem thêm: karaoke gợi nhớ quê hương

Mọi element vô một trong các HTML hoàn toàn có thể ở phía đằng trước hoặc đàng sau những element không giống vô document. Đây được gọi là trật tự xếp lớp (stacking order).

Thứ nhất, tự dưng tính cho tới 2 tính chất z-index và position, chỉ tồn tại một quy luật khá đơn giản: trật tự xếp lớp đó là trật tự xuất hiện nay vô HTML

Thứ nhị, khi tính cho tới tính chất position, thì khi bại từng element được gán position (và cả những element con cái của nó) đều xuất hiện nay phía đằng trước bất kì một element ko gán position (Ví dụ như các tính chất sau nhằm z-index sở hữu tác dụng: absolutefixed hay relative)

Thứ tía, tớ hoàn toàn có thể coi như element này có mức giá trị z-index cao hơn nữa thì tiếp tục đứng trước element có mức giá trị z-index thấp rộng lớn. Nghe giản dị và đơn giản tuy nhiên thực rời khỏi có khá nhiều quy tắc rộng lớn thế:

  • z-index chỉ chạy so với element này sở hữu gán position.
  • z-index hoàn toàn có thể tạo ra ra stacking context.

Stacking Contexts

Một group những element sở hữu công cộng một element phụ thân tiếp tục nằm trong dịch chuyển công cộng cùng nhau trong stacking order, tạo thành định nghĩa gọi là stacking context. Việc nắm rõ về stacking context đó là khóa xe nhằm hiểu trọn vẹn về phong thái z-index và stacking order sinh hoạt.

Mỗi một stacking context tiếp tục có một HTML element là element gốc (root element). Khi một stacking context gắn kèm với một element, nó sẽ bị links toàn bộ những element con cái vô 1 địa điểm thắt chặt và cố định vô stacking order. Điều bại Tức là nếu như 1 element ở trong một stacking context nằm tại bên dưới nằm trong của stacking order, tiếp tục không tồn tại cơ hội này thực hiện mang lại nó xuất hiện nay phía đằng trước một element ở trong một stacking context toạ lạc cao hơn nữa vô stacking order, trong cả nếu như mix z-index của chính nó cho tới 9999 !

Một stacking context hoàn toàn có thể được gắn với một element vị một trong 3 cách:

  • Khi một element là gốc của document (thẻ <html>)
  • Khi một element có mức giá trị position được mix không giống với static và z-index khác auto
  • Khi một element có mức giá trị opacity nhỏ hơn 1

Cập nhật: Cạnh cạnh opacity, một trong những property CSS mới mẻ lúc này cũng hoàn toàn có thể tạo ra stacking context. Chúng bao gồm transformsfilterscss-regionspaged media… Như một luật công cộng, này đó là nếu như như một property CSS đòi hỏi render vô một offscreen context, nó sẽ bị đưa đến một stacking context mới mẻ.

Xem thêm: trường sĩ quan lục quân 1

z-index là 1 trong đặc thù hoặc tạo ra nhức đầu so với developer mới mẻ thích nghi CSS. Tuy nhiên nếu như thâu tóm chất lượng về stacking order , stacking contextposition và những tính chất hoàn toàn có thể khiến cho stacking context “mở nhánh” như opacity, thì tiếp tục phần này tiếp tục tiện code nhanh chóng rộng lớn vô sau này. Mà tốt nhất có thể là một vừa hai phải hiểu một vừa hai phải thực hành thực tế mới mẻ lưu giữ, chứ hiểu ko có khả năng sẽ bị loàn óc.

Có thể mình thích coi thêm:

  • Tại sao API của Facebook lại chính thức vị một for loop?
  • Cách thiết lập một dự án công trình Symfony nhằm thao tác làm việc với Docker Subdomains
  • RESTful API là gì? Cách design RESTful API

Xem thêm việc thực hiện lập trình sẵn CSS hấp dẫn lương bổng cao tại TopDev!

Tác giả

Bình luận