1

I'm making a Netflix logo with pure CSS and I'm stuck. I create span element and also before the element of span 2. However, I don't know how to place .netflix span:nth-child(2) front on the z-axis when it is compared by .netflix span:nth-child(2):before. Basically, my question is is there any way to place elements on z-axis according to not by their parent elements but any elements that we want. Thanks in advance my HTML file is the following.

.netflix span {
  width: 50px;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: #e50914;
  margin: 0;
  padding: 0;
  top: 0;
  transform-origin: top left;
}

.netflix span:nth-child(1) {
  left: 0;
}

.netflix span:nth-child(2) {
  transform: skewX(26deg);
  box-shadow: 0 0 20px 13px rgba(0, 0, 0, 0.6);
}

.netflix span:nth-child(2):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: bottom right;
  transform: skewX(-25deg);
}
<div class="center netflix">
  <span></span>
  <span></span>
  <h1>NETFLIX</h1>
</div>
Sumesh TG
  • 2,557
  • 2
  • 15
  • 29
Süleyman Acar
  • 57
  • 1
  • 8
  • not clear what you're aiming for. Please, try to explain more. – ThS Sep 10 '18 at 02:05
  • What I want is that .netflix span:nth-child(2):before is above of the .netflix span:nth-child(2) on the z-axis. I want it the opposite one meaning that .netflix span:nth-child(2) is above on the z axis. However when ı apply z-index it doesnt work although .netflix span:nth-child(2) has a non-static position value. – Süleyman Acar Sep 10 '18 at 02:27

1 Answers1

2

I would say it depends on each situation but the answer is yes if you avoid creating a stacking context with the parent element. In other words, the parent element and child element need to belong to the same stacking context to be able to place the child element below its parent.

Here is some examples to better explain:

Why can't an element with a z-index value cover its child?

css z-index issue with nested elements

How can I display a header element above my content?

I have position but z index is not working

By the way, you can create your actual shape with an easier way and avoid any complex situation involving z-index

.netflix {
  width:100px;
  height:200px;
  display: inline-block;
  background: 
    linear-gradient(#e50914,#e50914) left/20px 100%,
    linear-gradient(#e50914,#e50914) right/20px 100%;
  background-repeat:no-repeat;
  margin: 20px;
  z-index:0;
  position:relative;
  overflow:hidden;
}

.netflix:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:20px;
  transform: skewX(22deg);
  background:#e50914;
  transform-origin:top left;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.6);
}
<div class="netflix">
  
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415