css z-index property is not working though I define the position property

Question

I am trying a simple thing using z-index. But it is not working. Can anyone help me?

Please check the code. The blue background should go below, but it is not.

.btn {
  padding: 15px 20px;
  background: white;
  border-radius: 20px;
  border: 1px solid red;
  position: relative;
  z-index: 10;
}

.btn:before {
  content: "";
  width: 100%;
  height: 100%;
  background: blue;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  border-radius: 20px;
  z-index: 5;
}

<a class="btn" href="#">Paynow</a>

There is only one element in your html, what do you want to put below of what ? — Donada, Dec 16 '19 at 16:23
https://stackoverflow.com/questions/14391208/how-does-z-index-really-work — Paulie_D, Dec 16 '19 at 16:29
check the duplicate to understand why you should not use z-index on the parent element when adding a negative one to the pseudo element — Temani Afif, Dec 16 '19 at 19:56

score 0 · Accepted Answer · answered Dec 16 '19 at 16:27

0

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>

answered Dec 16 '19 at 16:27

Paulie_D

107,962
13
142
161

Hi, If I add z-index property in .btn class like z-index: 10, and use z-index:-1 in pseudo class, it is also not working.. Is there any logic behind that,please? – jamil athar Dec 16 '19 at 16:36
You don't need to set a z-index on the `btn`...it's unnecessary. Numbers greater than 1 for Z-index usually are. – Paulie_D Dec 16 '19 at 16:37

css z-index property is not working though I define the position property

1 Answers1