时间戳

首页 > 解决方案 > 溢出的div：应用变换旋转（90度）时自动出现在前面

html - 溢出的div：应用变换旋转（90度）时自动出现在前面

问题描述

我有一个名为的scrollable-containerdiv，它包含一个空的标题 div 及其可滚动的内容。然后，我floating-button在scrollable-container.

<div id="wrapper">
  <div id="scrollable-container">
    <div id="header">I am Header</div>
    <div id="scrollable-content">...</div>
  </div>
  <div id="floating-button">Float</div>
</div>

请参阅下面的小提琴：

正常外观

浮动按钮当前与 和 重叠header，scrollable-content并且按预期位于前面，因为它的 z-index 值高于scrollable-container。此外，scrollable-container它有自己的堆叠上下文，因此它的子级永远不能在父级之外的任何东西前面。

然而，让我意想不到的是，如果我transform: rotate(90deg)在wrapperdiv 上应用，那么 divscrollable-content现在出现在 floating-button!

应用变换旋转（90）后

任何人都可以向我指出为什么它在旋转 90 度时会这样显示？

如果您查看第二个小提琴，请注意浮动按钮如何仍在 div 前面header，这是预期的，但只出现在 div 后面scrollable-content。

编辑：

我最初的问题询问是否有已知的方法来解决这个问题，这样即使在旋转 90 度后，任何原本有意放置在可滚动内容前面的 div 仍然可以出现在前面。

F.Muller 在他的回答中提供了一些解决方法。

但是，我想知道为什么overflow: auto在继承 a 时具有属性的 divtransform: rotate(90deg)可以取代其父级的堆叠上下文并出现在应该具有高于它的 z-index 顺序的所有其他内容的前面。

一些有趣的笔记：

  1. 这发生在最新版本的 Chrome 和 Safari 中，在其他浏览器上未经测试。
  2. 有趣的是，如果你旋转wrapper到 80 度，它仍然会floating-button正确显示前面。只有当它达到 90 度时，它才会消失在scrollable-content.
  3. overflow: hidden在做了一些实验之后，也正如 F.Muller 在下面的评论中所指出的那样，在div 处删除似乎wrapper可以纠正这种情况......但为什么会这样呢？

标签： htmlcss

解决方案

它可能会忽略，z-index因为覆盖元素不是父容器的子元素：#scrollable-container。

z-index我通过将 of 设置为#scrollable-container来修复它-1。Firefox 83.0 (64-Bit)在调整之后，它似乎也能正常工作Chrome V. 87.0.4280.67。

元素上的overflow: auto属性#scrollable-content和/或overflow: hidden属性将在.#wrapperChrome

编辑：如果您应用于position: relative包装元素，它可能会有所帮助。相对容器将设置分层堆栈。我们现在有 3 个孩子 - 内容和两个叠加层。参见：备选方案 II。

负 z-index 的解决方案：

#wrapper {
  height: 300px;
  width: 400px;
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  margin: 20px;
  background-color: #E2DCDE;
  overflow: hidden;
  transform: rotate(90deg);
}

#scrollable-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: -1;
}

#scrollable-content {
  height: 100%;
  overflow: auto;
}

#header {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
}

#front-overlay1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0.5;
}

#front-overlay2 {
  width: 50%;
  height: 100%;
  background-color: #B97375;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.row1 {
  height: 100px;
  width: 100%;
  background-color: #2D2D34;
  color: white;
  text-align: center;
  line-height: 100px;
}

.row2 {
  height: 100px;
  width: 100%;
  background-color: #686878;
  color: white;
  text-align: center;
  line-height: 100px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="wrapper">
    <div id="scrollable-container">
      <div id="header">I am Header</div>
      <div id="scrollable-content">
        <div class="row1">Column 1</div>
        <div class="row2">Column 2</div>
        <div class="row1">Column 3</div>
        <div class="row2">Column 4</div>
        <div class="row1">Column 5</div>
        <div class="row2">Column 6</div>
      </div>
    </div>
    <div id="front-overlay1"></div>
    <div id="front-overlay2"></div>
  </div>
</body>

</html>

替代方案（删除溢出属性）：

#wrapper {
  height: 300px;
  width: 400px;
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  margin: 20px;
  background-color: #E2DCDE;
  overflow: hidden;
  transform: rotate(90deg);
}

#scrollable-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

#scrollable-content {
  height: 100%;
  /*overflow: auto;*/
}

#header {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
}

#front-overlay1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0.5;
}

#front-overlay2 {
  width: 50%;
  height: 100%;
  background-color: #B97375;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.row1 {
  height: 100px;
  width: 100%;
  background-color: #2D2D34;
  color: white;
  text-align: center;
  line-height: 100px;
}

.row2 {
  height: 100px;
  width: 100%;
  background-color: #686878;
  color: white;
  text-align: center;
  line-height: 100px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="wrapper">
    <div id="scrollable-container">
      <div id="header">I am Header</div>
      <div id="scrollable-content">
        <div class="row1">Column 1</div>
        <div class="row2">Column 2</div>
        <div class="row1">Column 3</div>
        <div class="row2">Column 4</div>
        <div class="row1">Column 5</div>
        <div class="row2">Column 6</div>
      </div>
      <div id="front-overlay1"></div>
      <div id="front-overlay2"></div>
    </div>
  </div>
</body>

</html>

备选方案 II（位置：包装器上的相对位置）

#wrapper {
  position: relative;
  height: 300px;
  width: 400px;
  margin: 20px;
  background-color: #E2DCDE;
  overflow: hidden;
  transform: rotate(90deg);
  z-index: 0;
}

#scrollable-container {
  width: 100%;
  height: 100%;
  z-index: 1;
}

#header {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
}

#scrollable-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#front-overlay1, #front-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
}

#front-overlay1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  opacity: 0.5;
  z-index: 2;
}

#front-overlay2 {
  width: 50%;
  height: 100%;
  background-color: #B97375;
  opacity: 0.8;
  z-index: 3;
}

.row1,
.row2 {
  height: 100px;
  width: 100%;
  color: white;
  text-align: center;
  line-height: 100px;
}

.row1 {
  background-color: #2D2D34;
}

.row2 {
  background-color: #686878;
}
<div id="wrapper">
  <div id="scrollable-container">
    <div id="header">I am Header</div>
    <div id="scrollable-content">
      <div class="row1">Column 1</div>
      <div class="row2">Column 2</div>
      <div class="row1">Column 3</div>
      <div class="row2">Column 4</div>
      <div class="row1">Column 5</div>
      <div class="row2">Column 6</div>
    </div>
  </div>
  <div id="front-overlay1"></div>
  <div id="front-overlay2"></div>
</div>

推荐阅读