Placing child element on top of sibling element

user_15645857 0
Viewed 371

I want to place my child element on top of my sibling element without changing any of the written css. I can add anything extra required but cannot remove anything.

HTML:

<div class='sibling'>
  <div class='child'>
  </div>
</div>

<div class='sibling'>
</div>

CSS

.sibling{
  width:40px;
  height:40px;
  position:sticky;
  border:1px solid black;
  background:green;
  margin:4px;
}

.child{
  width:30px;
  height:100px;
  border:1px solid red;
  background:red;
}
css-position z-index css html
1 Answers

You can achieve this by giving the second sibling type element a z-index lower than the first one like so :-

.sibling{
  width:40px;
  height:40px;
  position:sticky;
  border:1px solid black;
  background:green;
  margin:4px;
}

.sibling:nth-of-type(1){
  z-index:2
}

.sibling:nth-of-type(2){
  z-index:1;
}

.child{
  width:30px;
  height:100px;
  border:1px solid red;
  background:red;
}
<div class='sibling'>
  <div class='child'>
  </div>
</div>

<div class='sibling'>
</div>

user_81306900
Related