How to Use the Z-Index Properly

How do I use the z-index properly?

The z-index property will only work when there is also a position property applied (not counting position: static;, which is the default).

All of the following will work, according to the spec:

position: fixed;
position: absolute;
position: relative;
position: sticky; /* Limited support, currently in Firefox and Opera */

The only exceptions are within a flex container or a CSS grid.

How to properly use z-index in this case?

Here is What I was able to come up with to be able to solve your issue: https://jsfiddle.net/L7ac6j3v/8/

One of the main issues I think you were facing was over complicating it for yourself by using crazy z-index values like 999 to 1005 etc, you'll see I have removed or replaced alot of the values with easy to work with values like 1,2 etc

Another main issue I was seeing was your use of the position style and not having position: absolute when trying to work with the z-index of an element

As a side note a way that I like to test if elements are positioned correctly is to use cursor: pointer and pointer-events

Hope this helps :)

z-index doesn't work properly

You will need to add a position property to all elements that have a z-index property. Try adding position: relative to all of them.

Also refer to this documentation: z-index CSS | MDN

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>

Understanding z-index stacking order

Basics of the CSS z-index property

A Simple Concept

The z-index property is based on a simple concept: Elements with higher values will sit in front of elements with lower values along the z-axis. So if you apply z-index: 1 to div.box1, and div.box2 has a z-index: 0, then div.box1 will overlay div.box2.

In terms of the z-axis, it refers to depth on a three-dimensional plane. On your computer it can be interpreted as the plane on which objects move closer and farther from you. (Learn more about the Cartesian coordinate system.)

Sample Image
Source: Wikipedia

z-index works on positioned elements

Unless you're dealing with flex items or grid items, the z-index property works only on positioned elements. This means you can use z-index on elements with position: absolute, position: relative, position: fixed or position: sticky. If the element has position: static (the default value), or some other positioning scheme like a float, then z-index will have no effect.

As noted, although z-index, as defined in CSS 2.1, applies only to positioned elements, flex items and grid items can create a stacking context even when position is static.

4.3. Flex Item Z-Ordering

Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.

5.4. Z-axis Ordering: the z-index property

The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.

Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/

Stacking Contexts

Once an element is positioned and a z-index is applied, a stacking context is created.

(Also see: Full list of circumstances where a stacking context is created.)

The stacking context is a set of rules for managing the positioned element with z-index, and its descendants. These rules govern the placement of child elements in the stacking order and the scope of the property's influence.

Essentially, the stacking context limits the z-index scope to the element itself, and its child elements cannot affect the stacking order of elements in another stacking context.

If you've ever tried to apply increasingly higher z-index values only to find that the element never moves out in front, you could be trying to overlay an element in a different stacking context.

Groups of elements with a common parent that move forward or backward
together in the stacking order make up what is known as a stacking
context. A full understanding of stacking contexts is key to really
grasping how z-index and the stacking order work.

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!

~ What No One Told You About Z-Index

Stacking Order

CSS adheres to a stacking order when laying out elements on a page. These are the stacking rules when there is no z-index specified, from farthest to closest:

  1. Backgrounds and borders of the root element
  2. Non-positioned, non-floating block elements, in the order they appear in the source code
  3. Non-positioned floating elements, in the order they appear in the source code
  4. Inline elements
  5. Positioned elements, in the order they appear in the source code

If a z-index property is applied, the stacking order is modified:

  1. Backgrounds and borders of the root element
  2. Positioned elements with a z-index of less than 0
  3. Non-positioned, non-floating block elements, in the order they appear in the source code
  4. Non-positioned floating elements, in the order they appear in the source code
  5. Inline elements
  6. Positioned elements, in the order they appear in the source code
  7. Positioned elements with z-index of greater than 0

Source: W3C

Bottom line: Once you understand stacking contexts, z-index is easy.

For examples of z-index in action see: How z-index works!

For a brief but highly informative article explaining z-index (including how opacity affects the stacking order) see: What No One Told You About Z-Index

For a complete rundown on z-index, with many examples and illustrations, see: MDN Understanding CSS z-index

And for a deep dive into stacking contexts read: W3C Elaborate description of Stacking Contexts

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>

How to use zIndex in react-native

I finally solved this by creating a second object that imitates B.

My schema now looks like this:

Sample Image

I now have B1 (within parent of A) and B2 outside of it.

B1 and B2 are right next to one another, so to the naked eye it looks as if it's just 1 object.

stacking pseudo-elements with z-index

In short: Set z-index on your head element. Move ears out of the head element.

Here is why.

z-index has stacking contexts. Each of those contexts has a root element (just any html element). Now, to become a root element it must comply with any of the following rules:

  • be <html> element
  • position other than static and z-index other than auto
  • opacity less then 1

So the default stacking context is with the <html> element as a root.

Once the element is inside a scope (in other words, child of a root element), it can only be positioned relative to the elements inside the scope.

Think about it as a nested list.

z-index scoping list

Wrap here is a root element, as it has position set to relative and z-index to 1. And all of its children are now inside a stacking scope with the Wrap as a root.

So, like in a nested list, children of a particular element cannot appear before its root. For example, Child2 cannot appear before the Wrap, since it is scoped inside of it. But it can appear before the Child1.

Now, in your case the structure is as follows:

Sample Image

Notice that the head is not a root, because it doesn't comply with the rules for becoming one (positioned elements must also have z-index other than auto). Therefore when you assign z-index of -1 to the Nose::before and ::after you get this:

Sample Image

The elements have been positioned all the way behind the Head, because they are in the same stacking scope. But they appear on top of Head::before, since when elements have the same z-index, they are stacked according to the order of appearance in html.

Now, to prevent head children from appearing behind it, you must add z-index to it. This will make it a root element of new stacking scope.

Sample Image

But this creates another problem. Now ears are positioned on top of the head. This is not possible to solve with css alone, since they are inside a stacking scope of the head. And root always lies behind every of its children.

To solve it, you must move the ears out of the head. So, it means, you won't be able to use pseudoelements (before & after) anymore. I suggest creating ear elements outside of the head and wrapping everything in some other element (named bear?) with position relative. Wrapper is needed if you still want to position ears relative to the head.

The answer is mostly inspired by this article.

Is z-index the only way to force an element to be positioned over top of another, if not what other methods are there?

You are hitting the stacking context bug

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.

The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.

Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/


Related Topics

Slanted Diagonal Line in HTML or CSS

Center Navbar Links Without Brand Pushing It to the Right in Bootstrap 4

Remove ':Hover' CSS Behavior from Element

Why Is My Page Not Scrollable

Like Whatsapp, How to Make an Input That Extends to Upwards as You Type

How to Fit a Sticky Background Image and Prevent Overflow in CSS

How to Include Custom Font Using CSS to Make It Compatible with Maximum Browsers

Why Alignment Mark List Is Different on Webkit When Using :Before Height

How to Center Something If I Don't Know Ahead of Time What the Width Is

Resizing Radio Button

Change Background Image Opacity

Blank Iframe in Ie

A Library to Convert Ansi Escapes (Terminal Formatting/Color Codes) to HTML

How to Use External Font in CSS

What Formatting Context Applies to Elements That Don't Create Their Own

Hidden Radio Button But Box Around It in IE8

Animate Spinning Circle(Percentage) with CSS

How to Draw Multiple Horizontal Lines (Notebook Paper Effect) Using CSS


Leave a reply



Submit