css - Z-Index 不适用于表格元素-6ren

css - Z-Index 不适用于表格元素

转载作者：太空宇宙更新时间：2023-11-04 07:28:53

我已经尝试了很多，但无法找出问题所在。将鼠标悬停在可用余额 问号 (?) 上时，z-index 根本不起作用。将鼠标悬停在问号 (?) 上时，可以注意到工具提示被表格标题区域截断了。有人可以指导我需要更改什么吗？这是我正在使用的完整代码。抱歉，代码太长了，但我已经尽可能多地输入代码，以便有人能解决这个问题。

/* SECONDARY TOOLTIP (S) */
[tooltip] {
	position: relative;
}

/* Arrow */
[tooltip]:before {
	width: 16px;
	height: 6px;
	left: 50%;
	margin-top: 1px;
	top: calc(100% - 10px);
	opacity: 1;
	content: '';
	position: absolute;
	z-index: 10;
	box-sizing: border-box;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #00204e;
	transform: translate(-50%, 0%);
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
}

/* Text */
[tooltip]:after {
	transform: translate(-50%, 0%);
	left: 50%;
	margin-top: 11px;
	top: calc(100% - 10px);
	opacity: 1;
	font-weight: normal;
	text-shadow: none;
	background: #00204e;
	border-radius: 4px;
	color: #fff;
	content: attr(tooltip);
	padding: 10px;
	position: absolute;
	white-space: normal;
	width: max-content;
	font-size: 9px;
	font-family: 'Helvetica Neue';
	line-height: normal;
	max-width: 150px;
	text-align: left;
	height: auto;
	display: inline-block;
	opacity: 0;
	-webkit-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-ms-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-o-transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition: all 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	pointer-events: none;
	/* overflow: overlay; */
	z-index: 999999;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
	opacity: 1;
	pointer-events: auto;
	top: calc(100% + 0px);
	z-index: 99999;
	overflow: visible;
	position: absolute;
}
/* SECONDARY TOOLTIP (E) */


.claro .dojoxGridHeader:first-child .dojoxGridRowTable {
    border-left-width: 0;
}
.claro .dojoxGridMasterHeader .dojoxGridRowTable {
    border-left: 1px solid #BCBCBC;
    border-right: 1px solid white;
    background-color: transparent;
}
.base .dojoxGridRowTable {
    height: 30px !important;
    word-wrap: break-word;
}
table.dojoxGridRowTable {
    table-layout: auto;
}
.dojoxGridHeader table {
    text-align: center;
}
.dojoxGrid table {
    padding: 0;
}
.dojoxGridRowTable {
    table-layout: fixed;
    width: 0;
    empty-cells: show;
}
table {
    font-size: 100%;
}

table[Attributes Style] {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}
user agent stylesheet
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

.claro .dojoxGridHeader:first-child {
    /* margin-left: -50px; */
    text-align: left;
    margin: 0px -1px;
}
.dojoxGridHeader {
    position: absolute;
    overflow: hidden;
    cursor: default;
}

.base .dojoxGrid {
    background-color: #FFFFFF;
    font-size: 12px;
    color: #00204e;
    padding: 0px 1px 20px 0px;
    border-top: 0px;
    height: 40px;
    /* margin-top: 115px; */
    /* border-top: solid 1px #D0D0D0; */
    /* border-bottom: solid 1px #D0D0D0; */
    /* margin-bottom: 20px; */
    width: 100%;
    /* width: 647px; */
    /* height: 226px !important; */
}
.base .dojoxGrid {
    background-color: transparent;
    border-width: 1px 0 0 0;
    font-size: 1em;
}
.base .dojoxGrid {
    font-size: 0.916em;
}
.dojoxGrid {
    position: relative;
    background-color: #EBEADB;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    -moz-outline-style: none;
    outline: none;
    overflow: hidden;
    height: 0;
}

.portlet {
    margin: 4px 0 30px 0;
    padding: 0;
    font-size: 0.75em;
}

body {
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-size: 14px;
    color: #00204c;
    /* margin-left: 125px; */
    margin: 0 auto;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}
.base .dojoxGridRowTable {
    height: 30px !important;
    word-wrap: break-word;
}
.dojoxGridHeader table {
    text-align: center;
}
.dojoxGridRowTable {
    table-layout: fixed;
    width: 0;
    empty-cells: show;
}
table {
    font-size: 100%;
}


table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

.claro .dojoxGridHeader:first-child {
    /* margin-left: -50px; */
    text-align: left;
    margin: 0px -1px;
}

.dojoxGridHeader {
    position: absolute;
    overflow: hidden;
    cursor: default;
}

.base .dojoxGrid {
    background-color: #FFFFFF;
    font-size: 12px;
    color: #00204e;
    padding: 0px 1px 20px 0px;
    border-top: 0px;
    height: 40px;
    /* margin-top: 115px; */
    /* border-top: solid 1px #D0D0D0; */
    /* border-bottom: solid 1px #D0D0D0; */
    /* margin-bottom: 20px; */
    width: 100%;
    /* width: 647px; */
    /* height: 226px !important; */
}
.base .dojoxGrid {
    background-color: transparent;
    border-width: 1px 0 0 0;
    font-size: 1em;
}
.base .dojoxGrid {
    font-size: 0.916em;
}
.dojoxGrid {
    position: relative;
    background-color: #EBEADB;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    -moz-outline-style: none;
    outline: none;
    overflow: hidden;
    height: 0;
}

.claro .dojoxGridHeader .dojoxGridRowTable tr {
    background: none;
}
.claro .dojoxGridRowTable tr {
    background: url(images/row_back.png) #fff repeat-x;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}

.base .dojoxGridRowTable {
    height: 30px !important;
    word-wrap: break-word;
}
.dojoxGridHeader table {
    text-align: center;
}
.dojoxGridRowTable {
    table-layout: fixed;
    width: 0;
    empty-cells: show;
}
table {
    font-size: 100%;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

.claro .dojoxGridHeader:first-child {
    /* margin-left: -50px; */
    text-align: left;
    margin: 0px -1px;
}
.dojoxGridHeader {
    position: absolute;
    overflow: hidden;
    cursor: default;
}

.base .dojoxGrid {
    background-color: #FFFFFF;
    font-size: 12px;
    color: #00204e;
    padding: 0px 1px 20px 0px;
    border-top: 0px;
    height: 40px;
    /* margin-top: 115px; */
    /* border-top: solid 1px #D0D0D0; */
    /* border-bottom: solid 1px #D0D0D0; */
    /* margin-bottom: 20px; */
    width: 100%;
    /* width: 647px; */
    /* height: 226px !important; */
}
.base .dojoxGrid {
    background-color: transparent;
    border-width: 1px 0 0 0;
    font-size: 1em;
}
.base .dojoxGrid {
    font-size: 0.916em;
}
.dojoxGrid {
    position: relative;
    background-color: #EBEADB;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    -moz-outline-style: none;
    outline: none;
    overflow: hidden;
    height: 0;
}

#AccountSummarySavingsListPortlet th[idx="3"], #AccountSummarySavingsListPortlet td[idx="3"] {
    text-align: right !important;
}
.claro .dojoxGridHeader tr:first-child .dojoxGridCell {
    border-top: 1px solid transparent;
}
.base .dojoxGridHeader th.dojoxGridCell {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    color: #00204e;
    border-bottom: thin;
    border-bottom-style: solid;
    border-bottom-color: #D0D0D0;
    height: 20px;
    text-align: left !important;
    /* white-space: nowrap !important; */
    padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
    background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
    padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
    border: 1px solid #fff;
    font-weight: bold;
    color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
    text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
    padding: 2px 5px;
    background: transparent;
    border-bottom: 1px solid #BCBCBC;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #BCBCBC;
    vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
    background: url(images/header.png) #e5edf4 repeat-x top;
    border-style: solid;
    border-width: 1px;
    border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
    text-align: center;
}
.base .dojoxGridCell {
    border: none;
    /* padding-left: 0px; */
}
.base .dojoxGridCell {
    border: none;
    /* padding-left: 0px; */
}
.base .dojoxGridCell {
    border: 1px solid #fff;
    padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
    outline: none;
}
.claro .dojoxGridCell {
    padding: 3px 5px;
    border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
    padding: 0px;
    border: 1px solid transparent;
}



.base .dojoxGridHeader th.dojoxGridCell {
    background: none repeat scroll 0 0 #FFFFFF;
    font-size: 1em;
    font-weight: bold;
    color: #00204e;
    border-bottom: thin;
    border-bottom-style: solid;
    border-bottom-color: #D0D0D0;
    height: 20px;
    text-align: left !important;
    /* white-space: nowrap !important; */
    padding: 15px 0px;
}
.base .dojoxGridHeader th.dojoxGridCell {
    background: none repeat scroll 0 0 #7692B7;
}
.base .dojoxGridHeader .dojoxGridCell {
    padding: 5px;
}
.base .dojoxGridHeader .dojoxGridCell {
    border: 1px solid #fff;
    font-weight: bold;
    color: #fff;
}
.base .dojoxGridHeader .dojoxGridCell {
    text-align: center;
}
.claro .dojoxGridHeader .dojoxGridCell {
    padding: 2px 5px;
    background: transparent;
    border-bottom: 1px solid #BCBCBC;
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid #BCBCBC;
    vertical-align: top;
}
.claro .dojoxGridHeader .dojoxGridCell {
    background: url(images/header.png) #e5edf4 repeat-x top;
    border-style: solid;
    border-width: 1px;
    border-color: #BCBCBC #BCBCBC #BCBCBC transparent;
}
.base .dojoxGrid th {
    text-align: center;
}
.base .dojoxGridCell {
    border: none;
    /* padding-left: 0px; */
}
.base .dojoxGridCell {
    border: none;
    /* padding-left: 0px; */
}
.base .dojoxGridCell {
    border: 1px solid #fff;
    padding-left: 3px !important;
}
.claro .dojoxGridCell, .claro .dojoxGridCellFocus {
    outline: none;
}
.claro .dojoxGridCell {
    padding: 3px 5px;
    border-color: transparent #E5DAC8 #E5DAC8 transparent;
}
.claro .dojoxGridCell {
    padding: 0px;
    border: 1px solid transparent;
}
.dojoxGridHeader .dojoxGridCell {
    border: 1px solid;
    border-color: #F6F4EB #ACA899 #ACA899 #F6F4EB;
    background: url(images/grid_dx_gradient.gif) #E8E1CF top repeat-x;
    padding-bottom: 2px;
}
.dojoxGridCell {
    border: 1px solid;
    border-color: #EBEADB;
    border-right-color: #D5CDB5;
    padding: 3px 3px 3px 3px;
    text-align: left;
    overflow: hidden;
}
caption, th {
    text-align: left;
}
address, caption, cite, code, dfn, th, var {
    font-style: normal;
    font-weight: normal;
}
body, div, dl, dt, dd, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    /* margin: 0; */
    padding: 0;
}


th {
    font-weight: bold;
    text-align: -internal-center;
}


table {
    font-size: 100%;
}

/*------------------------------------------ */

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

#A_12 {
  border: 1px solid #00204e;
	border-radius: 50%;
}

<table class="dojoxGridRowTable" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 1001px;" id="TABLE_1"><tbody id="TBODY_2"><tr id="TR_3"><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_4" class="dojoxGridCell dojoDndItem  dojoxGridCellFocus" idx="0" style="text-align: center;text-align: center;width:30%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_5">Account</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_6" class="dojoxGridCell dojoDndItem" idx="1" style="text-align: center;text-align: center;width:5%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_7">Currency</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_8" class="dojoxGridCell dojoDndItem" idx="2" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_9">Pending balance</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_10" class="dojoxGridCell dojoDndItem" idx="3" style="text-align: right;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_11">Available balance</div><a tooltip="this is a test" style="
    position: relative;
    text-align: center;
    width: 100%;
    display: block;
    /* overflow: visible; */
" id="A_12">?</a>
</th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_13" class="dojoxGridCell dojoDndItem" idx="4" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_14">Accrued Interest Rate</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_15" class="dojoxGridCell dojoDndItem" idx="5" style="text-align: center;text-align: center;width:10%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_16">Active</div></th><th tabindex="-1" aria-readonly="true" role="columnheader" id="TH_17" class="dojoxGridCell dojoDndItem " idx="6" style="text-align: center;text-align: center;width:12%;" dndtype="gridColumn_grid1522757357169402654"><div class="dojoxGridSortNode" id="DIV_18">Interest Rate</div></th></tr></tbody></table>

最佳答案

因为overflow隐藏在类.dojoxGridCell中

设置溢出继承

.dojoxGridCell {
    border: 1px solid;
    border-color: #EBEADB;
    border-right-color: #D5CDB5;
    padding: 3px 3px 3px 3px;
    text-align: left;
    overflow: inherit;
}

关于css - Z-Index 不适用于表格元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49631059/

文章推荐： python - 我无法为 y=sin(x) 创建图表

文章推荐： C程序如何检查数组第一个空格

文章推荐： c - 指针赋值被忽略

文章推荐： css - Bootstrap twitter 按钮和网格内的警告框？

c++ - #define for(int z=0;z<2;++z)for(int z=0;z<2;++z)for 中的第三个 'for' 是什么意思
我在一个C++程序中找到了一段代码，好像每隔for()循环两次。在这个程序中循环，但为什么在这样的预处理器定义中需要第三个 for 呢？ #define for for(int z=0;z<2;++z
java - 为什么 [a-z][A-Z] 给出的结果与 [ą-ž][Ą-Ž] 不同？
我正在尝试分割其中有一个小写字母后跟一个大写字母的文本。假设文本是: “Įvairių rūšiųSkinti kardeliai” 我想在“ųS”处拆分它，但是以下正则表达式“[ą-ž][Ą-Ž]
java - [a-z][a-z]* 和 [a-z]+ 正则表达式之间的区别
这个问题在这里已经有了答案: Reference - What does this regex mean? (1 个回答) 关闭 2 年前。下面的正则表达式有什么区别。对我来说，它们都是一样的 [
java正则表达式 [A-Z]{6}-[A-Z]{4}-[A-Z]{4}
我正在尝试用 Java 编写一个正则表达式: "/[A-Z]{6}-[A-Z]{4}-[A-Z]{4}/" 但是它不起作用。例如 "AASAAA-AAAA-AAAA".matches("/[A-Z]{
java - 测试字符串是否为 Java 变量标识符 : (a-z, A-Z,_,$) 后跟 (a-z,A-Z,0-9,_,$)
我需要确定一个字符串是否是一个变量标识符。即(a-z,A-Z,,$) 后跟 (a-z,A-Z,0-9,,$) 我知道我可以使用手动配置的 reg exp 来完成它，但必须有一个更紧凑的内置函数我可以
algorithm - 三个正数 x、y、z 的组合，使得 x + y、x - y、y + z、y - z、x + z 和 x - z 是完全平方数
早上好，我是新来的，我带来了一个小问题。我无法针对以下问题开发有效的算法:我需要找到三个正数 x、y 和 z 的组合，以便 x + y、x - y、y + z、y - z、x + z 和 x - z
c - 返回 z < 0 是什么？ z + y : z mean?
这个问题已经有答案了: How does the ternary operator work? (12 个回答) 已关闭 6 年前。我发现了一种不同的返回值的方式，并且很兴奋。它到底是什么意思？如
正则表达式 a-zA-Z 或 a-zA-Z 后跟 - 和 a-zA-Z
我需要以下正则表达式，允许 [a-zA-Z]+ 或 [a-zA-Z]+[ \\-]{0,1}[a-zA-Z]+ 所以我想在 a-zA-Z 字符之间允许无限的减号和空格示例: sdfsdfdsf-sf
python - 将多项式 w(z) 转换为 w((1-z)/(1+z))
我正在编写一个代码，它以“代码”(编码理论)作为输入，并且我已经计算了它的权重枚举器。我想使用 MacWilliams Identity 找到双代码的权重枚举器. 我有W(z) ，代码的权重枚举器，我
mysql - 如何通过 Alpha 集(a-z，a-z，a-z ...)制作简单的 MySQL Order
我已经编写了一个 child 文字游戏，现在我正在尝试优化性能。游戏以一种特殊的方式从数据库中挑选关键词，我想做得更好。给定一个按字母数字排序的 MySQL 关键字字段: keyword s
javascript - 如何使用正则表达式从字符串中去除 [a-z]/[a-z]/？
假设一个字符串是abc/xyz/IMPORTANT/DATA/@#!%@!%，我只想要IMPORTANT/DATA/!%#@%!#% 我对正则表达式很烂，而且真的还没学过 JavaScript API
JS中产生20位随机数以0-9为例也可以是a-z A-Z
JS代码： ? 1
python - 切片 : Generates a list of lists [a, b,c,...z] = [z], [y,z]
大家晚上好我想知道有没有更快的方法来生成以下形式的列表？ [a,b,c,…,z] → [[z], [y,z], [x,y,z], … , [a,b,…,y,z]] 我知道切片是最好的方法之一，但没有更
javascript - Firefox 上的嵌套 z-index 问题，较高的 z-index 落后于较低的 z-index
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题，我有一个 div，z-index 为 30000，位于 label 下方> zindex 为 9000。我认为这是由 z-inde
jquery - z-index:20 出现在 z-index:10 下面，即使它的 z 索引更大
我正在尝试制作一个灯泡。这是代码 JSfiddle HTML 查询 $('.button').click(function() { $('#add').show();
python - "from x.y import z"和 "import x.y.z as z"之间的区别
在您想将嵌套模块导入命名空间的情况下，我总是这样写: from concurrent import futures 不过，我最近意识到这也可以使用“as”语法来表达。请参阅以下内容: import c
c++ - 在 C++ 中创建一个执行 Matlab 操作 [z;z] 的函数，其中 z 是矩阵或 vector
我正在尝试创建一个基本上复制 matlab 命令的函数:[z;-z] 其中 z = randn(m,n) 返回一个 m -by-n 随机条目矩阵。我能够在 C++ 中为下面的 randn 函数创建一个
c - char * x,y,z;char* x,y,z;char (*)x,y,z; 和有什么区别？
好吧，我迷失在这些指针中，有人能准确地告诉我 char * x,y,z; 和 char* x,y,z 之间的区别是什么; 和 char (*)x,y,z; ？如果可以，请为您的答案或其他内容提供资源。
mysql - 如果 xy 决定 z，那么 x 决定 z 和 y 决定 z 吗？
这是一道函数依赖题。我知道当 x->yz 然后 x->y 和 x->z 时。但是上面的依赖关系可能吗？最佳答案 If xy determines z can x determine z and y
python - 映射和使用 (X, Y)、(X,Z) 和 (Y,Z) 对以及关联的 X、Y 或 Z 坐标
我有一个列表列表 nLedgers - 一个 3D 点云: [nodeID, X, Y, Z] 多行。一些节点将具有相同的 X 和 Y 坐标以及不同的 Z 坐标。我想首先确定具有相同 X 和 Y 坐

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Z-Index 不适用于表格元素