Html 旋转文本覆盖粘性导航栏_Html_Css_Css Transforms_Sticky

Html 旋转文本覆盖粘性导航栏

html css

Html 旋转文本覆盖粘性导航栏,html,css,css-transforms,sticky,Html,Css,Css Transforms,Sticky,我正在建立一个网站，它有一个粘性导航栏和一个表格。表格的第一列包含垂直文本。表格足够长，可以滚动。但是，当滚动时，旋转文本的行为很有趣：它出现在导航栏上。所有其他文本的行为与预期一致下面是我的example.html： <!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"&

我正在建立一个网站，它有一个粘性导航栏和一个表格。表格的第一列包含垂直文本。表格足够长，可以滚动。但是，当滚动时，旋转文本的行为很有趣：它出现在导航栏上。所有其他文本的行为与预期一致

下面是我的example.html：

<!DOCTYPE html>
<html lang="en">
    <head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Funny overlay example</title>
    </head>
    <body>
        <nav class="navbar">
            <div>
                Sticky Navbar
            </div>
        </nav>
        <section>
            <div>
                <table>
                    <tr><td rowspan="8" class="cell_vert_text"><div class="rotwrap"><div class="textcon">Problematic Text</div></div></td><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                    <tr><td class="cell_horiz_text">Ok Text</td></tr>
                </table>
            </div>
        </section>
    </body>
</html>

我怀疑旋转对DOM结构有一些副作用，但我真的不明白发生了什么。我试图通过引入z-index属性来解决这个问题，但没有任何帮助。

我不仅在寻找一种将旋转文本推到导航栏后面的解决方案，而且在寻找一种对实际情况的清晰解释。谢谢大家!

元素上的变换会创建一个，因为它的父元素都不是堆栈上下文，所以它与另一个堆栈上下文navbar（position sticky）处于同一级别

当我们在同一级别上有两个堆叠上下文，并且两者都没有

z-index

，最后一个将显示在前面的上下文之上

解决方案：在导航栏上设置z索引：

.navbar {
  z-index: 1;
  background: #ff0000;
  position: sticky;
  top: 0;
  width: 100%;
}

演示

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
高度：150像素；
溢出：自动；
}
navbar先生{
z指数：1；
背景：#ff0000；
位置：粘性；
排名：0；
宽度：100%；
}
表td.cell\u vert\u text{
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
宽度：1.5em；
}
表td.cell\u vert\u text div.rotwrap div.textcon{
变换：旋转（270度）；
左边距：-10em；
右边距：-10em；
}


粘性导航条
问题文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本

元素上的变换会创建一个堆栈，因为它的父元素都不是堆栈上下文，所以它与另一个堆栈上下文navbar（位置粘滞）处于同一级别

当我们在同一级别上有两个堆叠上下文，并且两者都没有

z-index

，最后一个将显示在前面的上下文之上

解决方案：在导航栏上设置z索引：

.navbar {
  z-index: 1;
  background: #ff0000;
  position: sticky;
  top: 0;
  width: 100%;
}

演示

*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
高度：150像素；
溢出：自动；
}
navbar先生{
z指数：1；
背景：#ff0000；
位置：粘性；
排名：0；
宽度：100%；
}
表td.cell\u vert\u text{
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
宽度：1.5em；
}
表td.cell\u vert\u text div.rotwrap div.textcon{
变换：旋转（270度）；
左边距：-10em；
右边距：-10em；
}


粘性导航条
问题文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：5000px；
}
navbar先生{
背景：#ff0000；
位置：粘性；
排名：0；
宽度：100%；
z指数：1；
}
表td.cell\u vert\u text{
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
宽度：1.5em；
}
表td.cell\u vert\u text div.rotwrap div.textcon{
变换：旋转（270度）；
左边距：-10em；
右边距：-10em；
}


粘性导航条
有问题的文本OK文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
高度：5000px；
}
navbar先生{
背景：#ff0000；
位置：粘性；
排名：0；
宽度：100%；
z指数：1；
}
表td.cell\u vert\u text{
文本对齐：居中；
空白：nowrap；
垂直对齐：中间对齐；
宽度：1.5em；
}
表td.cell\u vert\u text div.rotwrap div.textcon{
变换：旋转（270度）；
左边距：-10em；
右边距：-10em；
}


粘性导航条
有问题的文本OK文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本
Ok文本

非常感谢！不幸的是，我不能将两个答案都标记为接受，我将使用另一个相同的答案，它是在几秒钟前发布的。非常感谢！不幸的是，我不能将两个答案都标记为接受，我将使用另一个相同的答案，它是在几秒钟前发布的。