CODEWITHSUNDEEP
css
Joshua Leung
Joshua Leung

Reputation: 2399

How to make a fixed-position element inside a clip-path parent stay above all elements?

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;
}

I don't know what, but the fixed-position element stays behind the second div if its parent has the clip-path property. How can I make it stay above all elements?

Upvotes: 0

Views: 2242

Answers (2)

taryn
taryn

Reputation: 86

You can't make a fixed-position element inside a clip-path parent stay above all elements, because clip-path make a new layer, such as you can't use a fixed-position element inside a transform parent.

Upvotes: 2

Shadow Fiend
Shadow Fiend

Reputation: 1829

Is this what you are looking for? I just made some changes in your html..

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

Upvotes: 0

Related Questions