This has been asked before, but only where z-index
is explictly defined in the CSS.
I am trying to use clip-path on a heading, but then pull up an image from within an element beneath this back over the top of that header. However, as soon as I define a clip-path
on the header, the image (which should be higher up the stacking order as it appears later in the code) goes underneath the header:
body {
padding: 1em;
}
header {
background: #a00;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5em), 0 100%);
}
h1 {
margin: 0;
padding: 2em;
font: 300%;
color: white;
text-align: center;
}
section {
background: #ccc;
padding-top:5em;
margin-top:-5em;
}
img {
margin-top: -10em;
}
<header>
<h1>Header Content</h1>
</header>
<section>
<img src="https://via.placeholder.com/330/0000FF/808080"/>
</section>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…