z-index bị hủy bằng cách thiết lập biến đổi (xoay)

84

Sử dụng thuộc tính biến đổi, chỉ mục z bị hủy bỏ và xuất hiện ở phía trước. (Khi nhận xét ra -webkit-biến đổi, z-index đang hoạt động bình thường trong mã bên dưới)

.test {
  width: 150px;
  height: 40px;
  margin: 30px;
  line-height: 40px;
  position: relative;
  background: white;
  -webkit-transform: rotate(10deg);
}

.test:after {
  width: 100px;
  height: 35px;
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  -webkit-box-shadow: 0 5px 5px #999;
  /* Safari and Chrome */
  -webkit-transform: rotate(3deg);
  /* Safari and Chrome */
  transform: rotate(3deg);
  z-index: -1;
}
<html>

<head>
  <title>transform</title>
  <link rel="stylesheet" type="text/css" href="transformtest.css">
</head>

<body>
  <div class="test">z-index is canceled.</div>
</body>

</html>
Mở rộng đoạn mã

Làm thế nào để biến đổi và chỉ số z hoạt động cùng nhau?

css  z-index  transform 
— kbth
nguồn
Đây là trò chơi tôi đã thực hiện, Bạn có muốn ẩn văn bản bằng z-index không?
— Surjith SM,
Làm việc tốt jsfiddle.net/raunakkathuria/8MQkP thực sự nghi ngờ là gì?
— Raunak Kathuria
Cảm ơn bạn đã thực hiện fiddle. Tôi muốn hiển thị bóng phía sau hình chữ nhật văn bản (giống như một hình chữ nhật sau nó).
— kbth,

Câu trả lời:

140

Hãy xem qua những gì đang xảy ra. Để bắt đầu, hãy lưu ý rằng z-indextrên các phần tử được định vị và transformtự nó tạo ra " bối cảnh xếp chồng " mới trên các phần tử. Đây là những gì đang xảy ra:

.testPhần tử của bạn đã transformđặt thành thứ gì đó khác hơn là không có, điều này tạo cho nó ngữ cảnh xếp chồng riêng.

Sau đó, bạn thêm một .test:afterphần tử giả, là phần tử con của .test. Con này có z-index: -1, thiết lập mức ngăn xếp .test:after trong ngữ cảnh xếp chồng của.test Setting z-index: -1on .test:afterkhông đặt nó phía sau .testvì z-indexchỉ có ý nghĩa trong ngữ cảnh xếp chồng nhất định.

Khi bạn xóa -webkit-transformkhỏi .testnó, nó sẽ xóa bối cảnh xếp chồng của nó, gây ra .testvà .test:afterchia sẻ bối cảnh xếp chồng (của <html>) và làm .test:aftertụt hậu .test. Lưu ý rằng sau khi loại bỏ .test's -webkit-transformcai trị bạn có thể, một lần nữa, cho nó bối cảnh sắp xếp riêng của mình bằng cách thiết lập một mới z-indexquy tắc (bất kỳ giá trị) trên .test(một lần nữa, bởi vì nó được định vị)!

Vì vậy, làm thế nào để chúng tôi giải quyết vấn đề của bạn?

Để chỉ số z hoạt động theo cách bạn mong đợi, hãy đảm bảo điều đó .testvà .test:afterchia sẻ cùng một ngữ cảnh xếp chồng. Vấn đề là bạn muốn .testxoay với chuyển đổi, nhưng làm như vậy có nghĩa là tạo bối cảnh xếp chồng của riêng nó. May mắn thay, việc đặt .testtrong một hộp đựng và xoay sẽ vẫn cho phép các con của nó chia sẻ bối cảnh xếp chồng trong khi xoay cả hai.

  • Đây là những gì bạn đã bắt đầu: http://jsfiddle.net/fH64Q/

  • Và đây là một cách bạn có thể đi xung quanh các bối cảnh xếp chồng và giữ nguyên vòng quay (lưu ý rằng bóng bị cắt đi một chút do .testnền trắng):

.wrapper {
    -webkit-transform: rotate(10deg);
}
.test {
       width: 150px;
       height: 40px;
       margin: 30px;
       line-height: 40px;
       position: relative;
       background: white;
}
.test:after {
       width: 100px;
       height: 35px;
       content: "";
       position: absolute;
       top: 0;
       right: 2px;
       -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */
       -webkit-transform: rotate(3deg); /* Safari and Chrome */
       transform: rotate(3deg);
       z-index: -1;
}
<div class="wrapper">
    <div class="test">z-index is canceled.</div>
</div>
Mở rộng đoạn mã

Có nhiều cách khác để làm điều này, thậm chí là những cách tốt hơn. Tôi có lẽ sẽ làm cho nền "post-it" trở thành phần tử chứa và sau đó đặt văn bản vào bên trong, đó có lẽ sẽ là phương pháp dễ dàng nhất và sẽ làm giảm độ phức tạp của những gì bạn có.

Xem bài viết này để biết thêm chi tiết về z-indexvà thứ tự xếp chồng hoặc thông số kỹ thuật CSS3 của W3C hoạt động trên ngữ cảnh xếp chồng

— Lochlan
nguồn
4
Đây là một lời giải thích tuyệt vời về một trong những khía cạnh phức tạp nhất của bố cục CSS. Để đọc tương lai, kiểm tra spec W3
— AndyBean
11

Đặt div bạn muốn ở trên cùng position:relative

— AGrush
nguồn
1
Nó đã làm việc cho tôi. Nó có liên quan với bối cảnh ngăn xếp được đề cập ở trên không? Nếu ai đó có thể giúp làm rõ nó sẽ được đánh giá rất cao.
— glihm
7

Gặp phải một vấn đề tương tự trong đó anh chị em đang bị transform: translate()và z-indexkhông hoạt động.

Giải pháp đơn giản nhất là đặt position: relativetrên tất cả các anh chị em, sau đó z-indexsẽ hoạt động trở lại.

— seeker_of_bacon
nguồn
5

Khắc phục nhanh: Bạn cũng có thể xoay phần tử khác 0 độ.

— Chàng
nguồn
Điều này làm việc cho tôi trong trường hợp tôi không thể xoay container
— Daniel Flippance
1
Tôi đã gặp sự cố kỳ lạ với việc không quan sát được chỉ mục z, và sau đó việc áp dụng kiểu đã transform:rotate(0.0rad)sửa nó. Tôi không thể áp dụng nó thông qua quy tắc css, nó phải trực tiếp trên phần tử. Điều này không có ý nghĩa, nhưng cảm ơn vì đã đăng câu trả lời khiến tôi thử nó.
— Andrew Shepherd,
1

Tôi đã phải đối mặt với vấn đề tương tự. Những gì tôi đã làm là, tôi đã thêm một div bao bọc xung quanh thử nghiệm và đưa thuộc tính biến đổi cho div trình bao bọc.

.wrapper{
    transform: rotate(10deg);
}

đây là fiddle http://jsfiddle.net/KmnF2/16/

— Ankur Sahu
nguồn
-1

Đặt div bạn muốn ở trên cùng thành vị trí: tuyệt đối

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.