时间戳

首页 > 解决方案 > 如何将转换后的元素保留在另一个元素后面？

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

问题描述

.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 保持在前景后面？找到了几个示例，但它们似乎不适用于这种情况。

标签： css

解决方案

只需将 a 添加position: relative到两个图层，然后使用对它们进行排序z-index（如果position未设置，则考虑它static并且static不考虑 z-indexes）

.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;
}
<div class="container">
  <div class="background">B</div>
  <div class="foreground">F</div>
</div>

推荐阅读