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.
css z-index property is not working though I define the position property
Change the z-index of your pseudo-element to -1. The other numbers are irrelvant for this example.
.btn {
padding: 15px 20px;
/* background: white; */ not required if blue section is to be seen*/
border-radius: 20px;
border: 1px solid red;
position: relative;
color:white;
}
.btn:before {
content: "";
width: 100%;
height: 100%;
background: blue;
position: absolute;
display: inline-block;
left: 0;
top: 0;
border-radius: 20px;
z-index: -1;
}<a class="btn" href="#">Paynow</a>Why css z-index property is not working even z-index value of one component is greater than other target component?
z-index is working on positioned elements : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
So you could add position: relative; to your elements you want to change z-index prop
z index property not applied
z-index only works on positioned elements:
/* This does not work */
.foo {
z-index: 10;
}
/* This works */
.bar {
position: relative;
z-index: 10;
}
Source: http://www.w3.org/TR/CSS2/visuren.html#z-index
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>css z-index issue with given content and position property
You can do it using CSS3 transforms. You added position:relative to parent so stacking context prevented it from going behind.
Add below style to .brand
transform-style: preserve-3d;
And add below to pseudo elements
transform: translateZ(-1px)
Working fiddle
My z-index property is not getting set
Moving #iUngicontactForm from the table to the body tag will fix it.
The problem is that the z-index of an element is inherited from it's parent and it only applies to sibling elements. And as you're using fixed positioning, it's a quick fix.
So instead of something like this:
<body>
<table>
<tr><td>some content..</td></tr>
<tr><td><div id="iUngicontactForm"></div></td></tr>
</table>
</body>
do this:
<body>
<div id="iUngicontactForm"></div>
<table>
<tr><td>some content..</td></tr>
</table>
</body>
CSS z-index not working (position absolute)
Remove
z-index:0;
from .absolute.
Updated fiddle here.
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 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: relativeto#normal, or - give the positioned div a negative
z-indexvalue
#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>Related Topics
Textarea's Rows, and Cols Attribute in CSS
CSS 62.5% Why Do Developers Use It
How to Show Full Height Background Image
How to Change Font Color of Primary Palette in Angular Material2
Css3 Animate: How to Have the Object Not Revert to Its Initial Position After Animation Has Run
How to Use Media Queries in CSS
Font-Awesome Not Properly Displaying on Firefox/How to Vend via Cdn
What CSS3 Features Still Need Vendor Prefixes
How to Convert .Svg Files to a Font
Css3 Columns - Force Non Breaking/Splitting Element
Fill Element from Center on Hover
CSS Calc() - Multiplication and Division with Unit-Ed Values
When Do Web-Fonts Load and Can You Pre-Load Them
CSS Transitions Between Absolute and Relative Positioning