クリップパスの親要素内の固定位置要素をすべての要素の上に置く方法を教えてください。

Question

https://codepen.io/joshuajazleung/pen/YxvgVj

<div> 
    <span>Hello</span> 
</div> 

<div></div> 

body { 
    margin: 0; 
} 

div:first-child { 
    height: 300px; 
    background: blue; 
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); 
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); 
} 

div:nth-child(2) { 
    height: 1000px; 
    background: red; 
} 

span { 
    display: block; 
    font-size: 3rem; 
    text-align: center; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

私は知りませんが、親がクリップパス特性を持っている場合、固定位置要素は、第二のdivの後ろにとどまります。どうすればそれをすべての要素の上にとどめることができますか？

Answer 1

をいくつかの変更を行いました変換親内の固定位置要素は使用できません。

Answer 2

thisあなたが探しているのは？私はちょうどクリップパスは、あなたのような新しい層を作るので、あなたは、すべての要素以上のクリップ・パスの親ステーの内側に固定位置の要素を作ることができない...あなたのhtmlに

<div> 
</div> 
<span>Hello</span> 
<div> 
</div>