Z-index với trước phần tử giả

Question

Tôi đã tạo phần tử 'tiêu đề' với phần tử giả trước. phần tử pseudeo phải nằm phía sau phần tử cha. Mọi thứ đều hoạt động tốt cho đến thời điểm tôi đưa 'tiêu đề' của mình thành chỉ mục z.

Điều tôi muốn: Màu vàng 'tiêu đề' trên nền trước, phần tử giả màu đỏ trong nền và chỉ mục z đơn giản là 30 trên phần tử 'tiêu đề' màu vàng.

header { 
    background: yellow; 
    position:relative; 
    height: 100px; 
    width: 100px; 
    z-index:30; /*This is the problem*/ 
} 

header::before { 
    content:"Hide you behind!"; 
    background: red; 
    position:absolute; 
    height: 100px; 
    width: 100px; 
    top:25px; 
    left:25px; 
    z-index:-1; 
} 

Bạn có thể kiểm tra vấn đề của tôi vào liên kết này (http://jsfiddle.net/tZKDy/) và bạn gặp sự cố khi bạn thiết lập/xóa các z-index trên yếu tố de 'tiêu đề'.

Answer 1

:: trước phần tử giả được đặt bên trong phần tử tiêu đề.

CSS Spec:

Các: trước và: after giả yếu tố tương tác với các hộp khác như thể chúng là yếu tố thực được nạp chỉ bên trong phần tử liên quan của họ.

Đặt chỉ mục z cho phần tử đầu trang creates a new Stacking Context, vì vậy phần tử giả mới bạn đã tạo không thể trôi nổi phía sau phần tử tiêu đề, vì nó sẽ phải nằm ngoài ngữ cảnh xếp chồng đó.

Tôi đề nghị bạn chỉ đơn giản là đứng trước phần tử đầu trang bởi một phần tử khác, vì vậy nó ngăn xếp chính xác theo mặc định. Example.