Why Does Z-Index Not Work

Why does z-index not work?

The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).

There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.

Z-Index is not working

You need to make the .inner div position relative

.inner {
  z-index: 9999;  
  position: relative;
}

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

https://www.w3schools.com/cssref/pr_pos_z-index.asp

z-index not working for fixed element

Unless you're dealing with flex items or grid items, an element must be positioned for z-index to work.1

In other words, the position property must have a value other than static or z-index will be ignored.2

Your second div is not positioned. Here are two options:

  • add position: relative to #normal, or
  • give the positioned div a negative z-index value

#fixed {    background-color: red;    width: 500px;    height: 500px;    position: fixed;    z-index: 0;                   /* a negative value here will also work */}#normal {    background-color: lightblue;          width: 500px;    height: 500px;    z-index: 1;    position: relative;           /* new */}
<div id = 'fixed'> I'm Fixed </div><div id = 'normal'> I'm Normal </div>

Z-index does not work properly even when setting position elements and z-index?

Please see the CSS changes I made at the bottom under /* additions */. For the #features section, it has a white background by default, and you actually have to declare background-color: white; so that CSS knows to put the white background front of section#title

body {
  font-family: "Montserrat";
}

#title {
  background-color: #000b49;
  color: white;
}

h1 {
  font-family: "Montserrat";
  font-size: 3.5rem;
  line-height: 1.5;
  font-weight: 900;
}

h2 {
  font-family: "Montserrat";
  font-size: 2.5rem;
  font-weight: 500;
}

h3 {
  font-size: 1.5rem;
}

.container-fluid {
  padding: 3% 15%;
}

/* Navigation_bar */

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
}

.navbar {
  padding: 0 0 4.5rem;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: "Montserrat-Light";
  font-size: 1.2rem;
}

.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */

.iphone {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
  right: 30%;
}

.iphone-container {
  position: relative;
}

/* Features */

#features {
  padding: 10% 15%;
  position: relative;
  text-align: center;
  z-index: 1;
}

.feature-img {
  color: #35589a;
  padding-bottom: 15%;
}

.feature-img:hover {
  color: #c84b31;
}

.sub-text {
  color: #8f8f8f;
}

/* Testimonials */

#testimonials {
  text-align: center;
  background-color: #0f4d92;
  color: white;
}

.testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20px;
}

#press {
  background-color: #0f4d92;
  text-align: center;
  padding: 3%;
}

.press-logo {
  width: 15%;
  margin: 20px 20px 15px;
}

.carousel-item {
  padding: 7% 15%;
}

/* Pricing section */

#pricing {
  padding: 100px;
}

.pricing-col {
  padding: 3% 2%;
  text-align: center;
}

/* additions */

section#features {
  position: relative;
  background-color: white;
  z-index: 1;
}

section#title {
  position: relative;
  z-index: 0;
}


img.iphone {
  height: 400px;
  width: 200px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vietalk</title>

    <!-- Bootstrap  -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
      crossorigin="anonymous"
    />

    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>

    <!-- CSS Style Sheets -->
    <link rel="stylesheet" href="css/styles.css" />
    <!-- Google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,900;1,400;1,500&family=Ubuntu:ital,wght@0,400;0,700;1,300&display=swap"
      rel="stylesheet"
    />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <section id="title">
      <div class="container-fluid">
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="">tindog</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="">Contact</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="">Download</a>
              </li>
            </ul>
          </div>
        </nav>

        <!-- Title -->
        <div class="row">
          <div class="col-lg-6">
            <h1>Meet new and interesting dogs nearby.</h1>

            <button type="button" class="btn btn-dark btn-lg download-button">
              <i class="fab fa-apple"></i> Download
            </button>

            <button
              type="button"
              class="btn btn-outline-light btn-lg download-button"
            >
              <i class="fab fa-google-play"></i> Download
            </button>
          </div>

          <div class="iphone-container col-lg-6">
            <img class="iphone" src="https://raw.githubusercontent.com/BrianTruong23/tindog/main/TinDog%20Start%20Here/images/iphone6.png" alt="iphone-mockup" />
          </div>
        </div>
      </div>
    </section>

    <!-- Features -->

    <section id="features">
      <div class="container">
        <div class="row">
          <div class="col-lg-4">
            <i class="far fa-check-circle fa-4x feature-img"></i>
            <h3>Easy to use.</h3>
            <p class="sub-text">So easy to use, even your dog could do it.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-bullseye fa-4x feature-img"></i>
            <h3>Elite Clientele</h3>
            <p class="sub-text">We have all the dogs, the greatest dogs.</p>
          </div>

          <div class="col-lg-4">
            <i class="fas fa-heart fa-4x feature-img"></i>
            <h3>Guaranteed to work.</h3>
            <p class="sub-text">
              Find the love of your dog's life or your money back.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Testimonials -->

    <section id="testimonials">
      <div
        id="testimonials-carousel"
        class="carousel slide"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>

        <div class="carousel-inner">
          <div class="carousel-item active">
            <h2>
              I no longer have to sniff other dogs for love. I've found the
              hottest Corgi on TinDog. Woof.
            </h2>
            <img
              class="testimonial-image"
              src="images/dog-img.jpg"
              alt="dog-profile"
            />
            <em>Pebbles, New York</em>
          </div>
          <div class="carousel-item">
            <h2 class="testimonial-text">
              My dog used to be so lonely, but with TinDog's help, they've found
              the love of their life. I think.
            </h2>
            <img
              class="testimonial-image"
              src="images/lady-img.jpg"
              alt="lady-profile"
            />
            <em>Beverly, Illinois</em>
          </div>
        </div>
        <a
          class="carousel-control-prev"
          href="#testimonials-carousel"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#testimonials-carousel"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Press -->

    <section id="press">
      <img class="press-logo" src="images/techcrunch.png" alt="tc-logo" />
      <img class="press-logo" src="images/tnw.png" alt="tnw-logo" />
      <img class="press-logo" src="images/vn-logo.png" alt="biz-insider-logo" />
      <img class="press-logo" src="images/mashable.png" alt="mashable-logo" />
    </section>

    <!-- Pricing -->

    <section id="pricing">
      <h2>A Plan for Every Dog's Needs</h2>
      <p>Simple and affordable price plans for your and your dog.</p>

      <div class="row">
        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Chihuahua</h3>
            </div>
            <div class="card-body">
              <h2>Free</h2>
              <p>5 Matches Per Day</p>
              <p>10 Messages Per Day</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-6">
          <div class="card">
            <div class="card-header">
              <h3>Labrador</h3>
            </div>
            <div class="card-body">
              <h2>$49 / mo</h2>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-dark btn-lg">Sign Up</button>
            </div>
          </div>
        </div>

        <div class="pricing-col col-lg-4 col-md-12">
          <div class="card">
            <div class="card-header">
              <h3>Mastiff</h3>
            </div>
            <div class="card-body">
              <h2>$99 / mo</h2>
              <p>Pirority Listing</p>
              <p>Unlimited Matches</p>
              <p>Unlimited Messages</p>
              <p>Unlimited App Usage</p>
              <button type="button" class="btn btn-outline-dark btn-lg">
                Sign Up
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Call to Action -->

    <section id="cta">
      <h3>Find the True Love of Your Dog's Life Today.</h3>
      <button type="button">Download</button>
      <button type="button">Download</button>
    </section>

    <!-- Footer -->

    <footer id="footer">
      <p>© Copyright 2021 TinDog</p>
    </footer>
  </body>
</html>

z-index not working with elements whose parents are in fixed position

The simple solution is that what I'm trying to do is simply impassible.

The answer by #Krypton indeed solve this issue by altering the html, however in my situation altering the html order isn't possible.

The order of elements is called the Stacking Order, the stacking order is:

1. If no z-index or position then the stacking order is as the html markup order.

2. All positioned elements (relative, absolute and fixed) appear on top of all none positioned elements (static).

3. z-index works only on positioned elements, and it will create Stacking Context.

Stacking Context

Group of elements with common parent create Stacking Context if one of the next conditions are meet:

1. The root document element (the <html> element).

2. Positioned element with z-index

3. Element with opacity less the 1 (this isn't known by most of web developers)

All the elements in Stacking Context move together in the stacking order,
meaning that if element a inside staking context A, can't be above element b inside staking context B, if the stacking order of B is higher the A,
even if the element 'a' has z-index of a million.

Update: new css roles that create Stacking context: transform, filter, css-region and pages_media.

The order inside the Stacking Context:

1. root element

2. positioned element with negative z-index.

3. none positioned elements in the order of the html markup

4. positioned elements

5. positioned elements with z-index according to the z-index.

  • Now back to the question, in this example both the red and the green div create stacking context since they are positioned (fixed) and have z-index.
  • Both of them have the same z-index (value of 2), therefor there stacking order is the red below the green since this is the order of the html markup.
  • Now lets look at the pink and the lightgreen elements, the pink is nested inside the red elements and the lightgreen inside the green elements,
    since the red element has lower staking order than the green, all the nested elements inside the red elements appear below all the elements inside the green elements.

To fix this issue we need to create a new element that will create a new stacking context with higher stacking order than the red and the green div and place our popups inside of that elements.

Reference: What No One Told You About Z-Index by Philip Walton:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

z-index not working on side nav

Please check the .front's position property.
position: static;, position: initial; ignore z-index.

If you want to give z-index without changing position, change to position: relative;

function openNav() {    document.getElementById("myNav").style.width = "100%";}
function closeNav() {    document.getElementById("myNav").style.width = "0%";}
.overlay {    height: 100%;    width: 0;    position: fixed;    z-index: 1;    top: 0;    left: 0;    background-color: blue;    overflow-x: hidden;    transition: 0.5s;}
.overlay-content {    position: relative;    top: 25%;    width: 100%;    text-align: center;    margin-top: 30px;}
.overlay a {    padding: 8px;    text-decoration: none;    font-size: 36px;    color: #818181;    display: block;    transition: 0.3s;}
.overlay a:hover, .overlay a:focus {    color: #f1f1f1;}
.overlay .closebtn {    position: absolute;    top: 20px;    right: 45px;    font-size: 60px;}
.front {    position: absolute;    z-index: 1050;}
<div id="myNav" class="overlay">  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>  <div class="overlay-content">    <a href="#">About</a>    <a href="#">Services</a>    <a href="#">Clients</a>    <a href="#">Contact</a>  </div></div>
<h2>Fullscreen Overlay Nav Example</h2><span class="front" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>

z-index not working properly with pseudo-element

That is because you have positioned your pseudo-element absolutely in the <a> element, and this causes it to be stacked on top of the text node, which has static positioning.

To solve this issue, simply wrap the inner text with <span> and then add this rule:

.start-coding > span {
  position: relative;
  z-index: 2;
}

Even better: you don't even need to add z-indices to both ::before and the nested <span>, since they come in an order that ensures that, when they are placed in a stacking context, the <span> will always be on top (since it comes after the ::before element in the DOM tree). See example:

.start-coding {
  display: block;
  font-size: 1.3rem;
  color: white;
  background-color: black;
  padding: 0.4rem 1.8rem;
  position: relative;
  z-index: 5;
  border-radius: 5px;
  width: 100%;
}

.start-coding::before {
  content: '';
  background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  border-radius: 5px;
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}

.start-coding>span {
  position: relative;
}
<a href="#" class="start-coding"><span>Start Coding</span></a>

Related Topics

Center and Bottom-Align Flex Items

Which HTML Elements Can Receive Focus

Fixed Page Header Overlaps In-Page Anchors

Cut Corners Using Css

Left Column and Stacked Right Column Using Flexbox Css

Fill the Remaining Height or Width in a Flex Container

≪Meta Charset="Utf-8"≫ VS ≪Meta Http-Equiv="Content-Type"≫

Why Doesn't Nth-Of-Type/Nth-Child Work on Nested Elements

Why Is the ≪Center≫ Tag Deprecated in Html

How to Override Bootstrap CSS Styles

Vertically Centering a Div Inside Another Div

Stylesheet Not Loaded Because of Mime-Type

Auto Detect Mobile Browser (Via User-Agent)

Two Submit Buttons in One Form

Chrome Ignores Autocomplete="Off"

Simple Way to Display Data in a .Txt File on a Webpage

How to Disable Auto-Play for Local Video in Iframe

When Div With Absolute Position Is Added Cannot Click on Links


Leave a reply



Submit