I Have Position But Z Index Is Not Working

z-index not working with fixed positioning

This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

Solutions

The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

  1. The stacking context’s root element (the <html> element in this case)
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

So you can

  1. set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
  2. set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

  1. When a stacking context is formed

    • By default, the <html> element is the root element and is the first stacking context
  2. Stacking order within a stacking context

The Stacking order and stacking context rules below are from this link

When a stacking context is formed

  • When an element is the root element of a document (the <html> element)
  • When an element has a position value other than static and a z-index value other than auto
  • When an element has an opacity value less than 1
  • Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Stacking Order within a Stacking Context

The order of elements:

  1. The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)

    • You cannot put a child element behind a root stacking context element
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

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.

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>

I have position but z index is not working

You need to remove the transform and replace it with something else and you will be able to move the pseudo-element behind:

:root{  --size:200px;}#background {  width:100%;  height:100%;  position:absolute;  top:0;  left:0;  background: linear-gradient(-23.5deg, #000033, #00001a);  z-index:-2;}
#background #mainplanet { width:var(--size); height:var(--size); background:#fff; position:relative; top:calc(50% - var(--size)/2); left:calc(50% - var(--size)/2); border-radius:50%;}
#background #mainplanet:before,#background #mainplanet:after{ content:""; width:calc(var(--size) * 1.5); height:calc(var(--size) / 2); border:30px solid #000; position:absolute; top:10px; left:-80px; border-radius:50%; transform: rotateX(66deg) rotateY(170deg);}
#background #mainplanet:before{ border-top-color:transparent;}
#background #mainplanet:after{ z-index:-3;}
<div id="background">  <div id="mainplanet">  </div></div>

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

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 is not working with position fixed

Why the position fixed is blocking to the layer (z-index) ?

This is because of The stacking context. CSS positioning and adding a z-index value to an element creates a new stacking context.

From MDN page:

Note: The hierarchy of stacking contexts is a subset of the hierarchy of HTML elements.

Hence in your particular case:

<div id="one">
<div id="overlay"></div>
</div>
<div id="two">
<a href="#" id="link">test</a>
</div>

The hierarchy of stacking contexts would be:

  • Root
    • #one
    • #two
      • #link

And #link would be placed under the #one no matter how much its z-index value is.

One option is increasing the z-index value of #two element (more than #one).

CSS z-index not working with position relative

Thing you got wrong was position: relative instead of position: absolute. I changed it and now it works. position: relative makes it only, well, relative, not render regardless or other DOM elements.

I added background: red so the effect is better visible.

Your z-index works just fine, but element is still rendered respecting other DOM elements.

According to MDN:

  • relative:
    The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
    This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
  • absolute:
    The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

Key part

.dropdown {
position: absolute;
...
}

Snippet

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>Z-Axis</title>    <style>        #main_div {            position: relative;            z-index: 0;            top: 0px;            left: 0px;        }        .list-wrapper {          position: relative;        }        .dropdown {            position: absolute;            top: 0;            left: 0;            z-index: 1;            background: red;        }    </style></head><body>    <div id="main_div">    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.      <div class="list-wrapper">        <p>line 1 of text</p>        <ul class="dropdown">            <li>5</li>            <li>10</li>            <li>20</li>        </ul>        <p>line 2 of text</p>        <p>line 3 of text</p>        <p>line 4 of text</p>        <p>line 5 of text</p>        <p>line 6 of text</p>      </div>    </div></body></html>

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



Related Topics



Leave a reply



Submit