CODEWITHSUNDEEP
cssz-index
Ryepower
Ryepower

Reputation: 181

z-index not working even with absolute positioning

I am trying to create a fish and its backfins don't go behind its body even if I use the z-index property properly set. What's wrong with this? I know I can only use z-index with positioned elements. What's the other thing that might influence the properties behavior?

.fish{
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
}

.fish-body {
    position: relative;
    top: 40%;
    left: 23.5%;
    background: black;
    width: 53%;
    height: 45%;
    border-radius: 10% 150% 2% 150%;
    transform: rotate(142deg);

}

.backfin-top{
    position: absolute;
    top: 88%;
    left: 56%;
    background:yellow;
    width: 53%;
    height: 45%;
    transform: rotate(85deg);
    border-radius: 0% 50% 400% 10%;
    z-index:-1;
}

.backfin-bottom{
  position: absolute;
    bottom: 0%;
    right: -34%;
    background: yellow;
    width: 53%;
    height: 45%;
    border-radius: 10% 400% 10% 50%;
    z-index:-1;
}
 <div class="fish">
  <div class="fish-body">
    <div class="backfin-top"></div>
    <div class="backfin-bottom"></div>
  </div>   
 </div>

Upvotes: 1

Views: 2200

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9358

Here is my solution,

Basically, I had to change your html stucture. Check snippet below

This is required because, first, the 

 <div class="backfin-top"></div>
 <div class="backfin-bottom"></div>

will be drawn on screen, and then the fish body will be drawn

In your case placing the fins inside fish body div made z-index useless for placing the fins behind the fish.

In the following example z-index is not required to place the fins behind.

.fish {
  margin: auto;
  display: block;
  margin-top: 5%;
  width: 300px;
  height: 300px;
  position: relative;
}

.fish-body {
  position: relative;
  top: 40%;
  left: 23.5%;
  background: black;
  width: 53%;
  height: 45%;
  border-radius: 10% 150% 2% 150%;
  transform: rotate(142deg);
}

.backfin-top {
  position: absolute;
  top: 38%;
  left: -4%;
  background: yellow;
  width: 33%;
  height: 25%;
  transform: rotate(217deg);
  border-radius: 0% 50% 400% 10%;
 
}

.backfin-bottom {
  position: absolute;
  bottom: 15%;
  right: 70%;
  background: yellow;
  width: 33%;
  height: 25%;
  border-radius: 10% 400% 10% 50%;

  transform: rotate(317deg) scale(-1, -1);
}
<div class="fish">
  <div class="backfin-top"></div>
  <div class="backfin-bottom"></div>
  <div class="fish-body">
  </div>
</div>

z-index on positioned elements and transform by itself create new "stacking contexts" on elements. Here's what's going on:

Your .fish-body element has transform set to something other than none, which gives it its own stacking context.

You then add a fins, which is a child of .fish-body. This child has z-index: -1, setting the stack level of fins within the stacking context of .fish-body Setting z-index: -1 on fins does not place it behind .fish-body because z-index only has meaning within a given stacking context.

When you remove transform from .fish-body it removes its stacking context, causing .fish-body and .fins to share a stacking context (that of <html>) and making fins go behind .fish-body.

Upvotes: 2

Prabin Sapal
Prabin Sapal

Reputation: 346

index is not working in your case because we cannot overwrite the z-index of parent div. If we want use z-index then all the elements should be a child of same parent and we should use position as well. Please take a look on following code and output.

    .fish{
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
        position: relative;
}
.fish-body {
    position: relative;
    top: 40%;
    left: 23.5%;
    background: black;
    width: 53%;
    height: 45%;
    border-radius: 10% 150% 2% 150%;
    transform: rotate(142deg);

}
.backfin-top {
    position: absolute;
    top: 45%;
    left: 0;
    background: yellow;
    width: 40%;
    height: 25%;
    transform: rotate(225deg);
    border-radius: 0 50% 400% 10%;
    z-index: -1;
}
.backfin-bottom {
    left: 0;
    position: absolute;
    bottom: 46px;
    background: yellow;
    width: 40%;
    height: 25%;
    border-radius: 10% 400% 10% 50%;
    z-index: -1;
    transform: rotate(135deg);
}
<div class="fish">

    <div class="fish-body"></div>
            <div class="backfin-top"></div>
            <div class="backfin-bottom"></div>
    

</div>

Upvotes: 0

Related Questions