Problem with changing order of elements in html/css

Question

I have two elements as parent and child and I want to make the child element to go behind the parent element. I try to add z-index:-1 to child element but nothing happens ... can someone guide me on how to make the child go behind parent element.

.parent {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: coral;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: silver;
  z-index: -1;
}

<div class="parent">
  parent
  <div class="child">child</div>
</div>

You cannot do it, as parent is the base. – Praveen Kumar Purushothaman Oct 15 '18 at 17:06 — Praveen Kumar Purushothaman, Oct 15 '18 at 17:06

score 2 · Accepted Answer · answered Oct 15 '18 at 17:20

The problem here is that when you set a transform property other than none, you define a new stacking context in CSS. Removing this property fixes the issue. 1.

    .parent {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: coral;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
/*  transform: translate(-50%, -50%);
*/  
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: silver;
  z-index: -1;
}

<div class="parent">parent
    <div class="child">child</div>
  <div>

score 1 · Answer 2 · answered Oct 15 '18 at 17:08

At this moment, you can't do this. But what you can do is, give the styles of parent to the ::before pseudo element and you can get it done:

.parent {
  width: 200px;
  height: 200px;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: -99em;
}

.parent::before {
  content: 'parent';
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: coral;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: silver;
  z-index: -1;
}

<div class="parent">
  parent
  <div class="child">child</div>
</div>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

You can't do that, because the child is wrapped in the parent. You can only swap parents with parents, and childs with childs. But but not parents with childs!

I would recommend to do stuff like this, like swaping parents with parents, via flex-box order.

Idk if it's allowed to share links but this tutorials here are pretty good and helped me a lot. I'm also a beginner

https://youtu.be/JJSoEo8JSnc https://www.w3schools.com/css/css3_flexbox.asp

edit Okay you can do that, look at the other answer. But for me it's not a clean way to swap parents with childs. I'd avoid to do it.

score 0 · Answer 4 · answered Oct 15 '18 at 17:24

Put the parent text in a div also

.parent {
  width: 200px;
  height: 200px;
  color: white;
  font-size: 25px;
  text-align: center;
  line-height: 200px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent-text {
  border-radius: 50%;
  background-color: coral;
  z-index: 1;
  top: 1px;
  left: 1px;
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: silver;
  z-index: -100;
}

<div class="parent">
  <div class="parent-text">parent</div>
  <div class="child">child</div>
</div>

Problem with changing order of elements in html/css

4 Answers4

edit Okay you can do that, look at the other answer. But for me it's not a clean way to swap parents with childs. I'd avoid to do it.