Pseudo element not going behind parent element using z-index
https://codepen.io/stressunfit/pen/BaMyJEr?editors=1100
Hi in this codepen i am trying to create number 1. i want the pseudo element to go behind the .number div but i am not able to achieve that. can anyone explain how stacking context is working here.
5 Replies
solved
just use this css to make number 1
.number::before {
content: "";
width: 25px;
height: 40px;
background-color: white;
position: absolute;
left: -18px;
top: 2px;
transform: rotate(50deg);
border-radius: 3px;
z-index: -10;
}
@AimalQazi#992 but i want pseudo element to be behind .number div , so that i can create that shadow effect on "1"
if you want to make this use z-index to the pesudo-element to number 1 and use inner-shadow to the pesudo element
can you provide code
@AimalQazi#992 https://codepen.io/stressunfit/pen/BaMyJEr?editors=1100
try creating a new stacking context on the number parent container, i.e. the "center".
If you give the ".center" selector a
z-index: 1 and remove the z-index: 0 from your ".number" selector you should get closer to what you want.