Làm thế nào để làm cho phần tử con cao hơn so với cha mẹ với z-index

Question

Giả sử tôi có mã này:

<div class="parent"> 
    <div class="child"> 
     Hello world 
    </div> 
</div> 

<div class="wholePage"></div> 

jsFiddle này: http://jsfiddle.net/ZjXMR/

Bây giờ, tôi cần phải có <div class="child"> ở trên của <div class="wholePage"> nhưng trong jsFiddle bạn có thể thấy rằng phần tử con được hiển thị trước <div class="wholePage">.

Nếu bạn xóa parent lớp position hoặc z-index, mọi thứ hoạt động tốt. Đây là hành vi chính xác mà tôi cần: http://jsfiddle.net/ZjXMR/1/

Tôi có thể làm điều đó với z-index và không xóa bất kỳ nội dung nào khỏi trang?

Answer 1

Điều này là không thể vì trẻ em z-index được đặt thành chỉ mục xếp chồng giống như cha mẹ của nó.

Bạn đã giải quyết được sự cố bằng cách xóa chỉ mục z khỏi cha mẹ, giữ nguyên chỉ mục này hoặc biến phần tử thành anh chị em thay vì một đứa trẻ.

Answer 2

Để đạt được những gì bạn muốn mà không xóa bất kỳ kiểu nào, bạn phải tạo chỉ mục z của lớp '.parent' lớn hơn lớp '.wholePage'.

.parent { 
    position: relative; 
    z-index: 4; /*matters since it's sibling to wholePage*/ 
} 

.child { 
    position: relative; 
    z-index:1; /*doesn't matter */ 
    background-color: white; 
    padding: 5px; 
} 

jsFiddle: http://jsfiddle.net/ZjXMR/2/

Answer 3

Cho phụ huynh z-index: -1, hoặc opacity: 0.99

Answer 4

Sử dụng vị trí không tĩnh cùng với z-index lớn hơn trong phần tử con:

.parent { 
    position: absolute 
    z-index: 100; 
} 

.child { 
    position: relative; 
    z-index: 101; 
} 

Answer 5

Không có gì là không thể. Sử dụng vũ lực.

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top:0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 100; 
} 

Answer 6

Tôi gặp vấn đề tương tự. Những gì tôi đã làm chỉ là thêm vị trí: tương đối; và chỉ số z: 1; để div con.

.child-div { 
    position: relative; 
    z-index: 1; /*or greater*/ 
}