在html / css中更改元素顺序的问题

Question

我有两个元素作为父元素和子元素，我想使子元素位于父元素后面。我尝试将z-index：-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>

Answer 1

这里的问题是，当您设置transform以外的none属性时，会在CSS中定义一个新的堆栈上下文。删除此属性可解决此问题。 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>

Answer 2

目前，您不能执行此操作。但是您可以做的是，将parent的样式赋予::before伪元素，您就可以完成它：

.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>

Answer 3

您不能这样做，因为孩子被包裹在父母中。 您只能将父母与父母交换，将孩子与孩子交换。但是但没有带孩子的父母！

我建议这样做，例如通过flex-box命令与父母交换父母。

Idk（如果允许共享链接），但是此处的本教程非常好，对我有很大帮助。我也是初学者

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

edit好吧，您可以这样做，看看另一个答案。但是对我来说，这不是一种将父母与孩子交换的干净方法。我会避免这样做。

Answer 4

也将父文本放在div中

.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>