Z-Index Without Absolute Position

Z-Index without absolute position

Yes: use position:relative; z-index:10.

z-index has no effect for position:static (the default).

Note that z-index is not a global layering system, but only differentiates ordering within each positioned parent. If you have:

<style type="text/css">
  div { position:relative }
  #a  { z-index:1  }
  #a1 { z-index:99 }
  #b  { z-index:2  }
</style>
...
<div id="a"><div id="a1">SUPER TALL</div></div>
<div id="b">I WIN</div>

...then #a1 will never render above b, because #b is layered above #a. You can see a demo of this at http://jsfiddle.net/DsTeK

Is there a z-index alternative for elements without a fixed/relatic/absolute position?

First thing first: z-index only works on positioned elements, that is having a position attribute value other than the default (static). The display property is not relevant for that matter.

Update:
There is once exceptional here - z-index will work on flex item even if it's "unpositioned"

The easiest way to "activate z-index" without breaking the current style would be to use position:relative, since by itself it will not change the UI behavior.
That is, if you did not provide any offset attribute (top/bottom/left/right)

Now for your specific situation - the problem is not only with the hamburger z-index activation, but rather the fact it's located in the header element, while the menu items (.nav-links) are in the nav element.
Since header and nav elements are sibling here, you should choose which one should be above the other.

You could give header heigher z-index value to achieve that, for example:

header {
    z-index: 2; // higher than nav-links z-index (1)
    position: relative;
}

This will get the humburder to be on top, but also the entire header including the text Team Jatrian.

Keep in mind z-index work in stacking-contexts:

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

Meaning if header is to be above nav, it means all of header's children would be above nav as well, So you might consider to move the hamburger to be under a different element.

z-index not working with position absolute

The second div is position: static (the default) so the z-index does not apply to it.

You need to position (set the position property to anything other than static, you probably want relative in this case) anything you want to give a z-index to.

CSS- How'd they do that without Absolute Positioning and Z-index?

#mast-logo is absolutely positioned.

#mast-logo {
  background: url("http://grfx.cstv.com/schools/iowa/graphics/iowa-10-logo.png") no-repeat scroll 0 0 transparent;
  height: 133px;
  left: -13px;
  position: absolute;
  top: -4px;
  width: 198px;
  z-index: 200;
}

It is not really difficult to do, once you get the hang of absolute and relative positioning.

CSS z-index not working (position absolute)

Remove

z-index:0;

from .absolute.

Updated fiddle here.

z-index not working even with absolute positioning

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 Not Working with Absolute Position

If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.

.top-bar {
 z-index:999;
}

css: how to prevent absolutely positioned :after element from scaling during transition?

Invert the styles applied I.E. apply the styles applied to the button to the :after element and vice-versa. because otherwise the :after element will also expand when hovered over the button

button {
  position:relative;
  border:1px solid #000;
  display: block;
  padding: 1.5rem 2.5rem;
}

button::after {
  content: '';
  z-index: -100000;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  
  display: block;
  cursor: pointer;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  color: white;
  border: none;
  background: red;
  z-index: 10000;   
}

button:hover:after {
  transform: translate(-50%, 50%) scale(1.5);
  transition: transform 0.2s;
}

<p>element is left bottom corner</p>
<button></button>

Why does position:relative; appear to change the z-index?

You need to refer to the specification and more precisely the painting order to understand when each layer is painted.

Without position:relative your element is not positioned and will be painted at the step (4):

4. For all its in-flow, non-positioned, block-level descendants in tree
   order: If the element is a block, list-item, or other block
   equivalent:

Then we paint the positioned elements (including the .mask) at the step (8)

8. All positioned, opacity or transform descendants, in tree order that fall into the following categories

---

Now when you add position:relative you make the container also positioned thus it will fall in the step (8) too and as described there we consider the tree order since both don't have any z-index specified. So the .container will painted later in this case.

If you change the order of the element (you make the container before the mask) you will notice that position:relative won't have any effect because in both cases the painting order will be the same:

body {
  margin: 0;
  font-family: arial;
}
section {
  position: relative;
  background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider/img-41.jpg)
    no-repeat left center/cover;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.container {
  position: relative; /* you can remove this*/
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3452ff;
  opacity: 0.7;
}

<section>
  <div class="container">
    <h1>Hello World</h1>
  </div>
  <div class="mask"></div>
</section>

---

Related Topics