Question

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

这个例子也在这里：https://jsfiddle.net/jasajona/vmzfgkcb/ 如何将变换后的背景div保留在前景之后？找到了几个例子，但它们似乎不适用于这种情况。

Answer 1

只需向两个图层添加position: relative，然后使用z-index对其进行排序（如果未设置position，则会将其视为static和{{ 1}}不考虑z索引）

＆＃13;

static

＆＃13;

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
  position: relative;
  z-index: 1;
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

＆＃13;

Answer 2

问题在于transform元素会创建一个新的“堆叠上下文”，它会取代源顺序，否则将确定哪个元素位于“顶部”。

有几种方法可以解决这个问题，但我最喜欢的解决CSS z-index计算这种奇怪现象的方法是在前景元素中添加opacity属性：

.container{
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
} 

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  opacity: 0.999;
}

<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

以下是关于z-index堆叠上下文的两个资源：

Answer 3

你可以给前景position:relative，它会像这样显示在上面：

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);  
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  position:relative;
}

<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

Answer 4

您可以在前景元素上使用isolation属性 - 这会创建一个新的堆叠上下文。

＆＃13;

.container {
  width: 100px;
  height: 100px;
  font-size: 100px;
}

.background {
  color: red;
  width: 100%;
  height: 100%;
  margin-bottom: -100%;
  transform: rotate(90deg);
}

.foreground {
  color: blue;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

＆＃13;

<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

＆＃13;

如何将变换后的元素保留在另一个元素后面？

4 个答案: