Css 为什么我需要rotateX在工具提示生效之前：之后：生成？_Css

Css 为什么我需要rotateX在工具提示生效之前：之后：生成？

css

Css 为什么我需要rotateX在工具提示生效之前：之后：生成？,css,Css,我有一个包含从tr:hover和tr:action调用的工具提示的表，使用：after和：before。 JSFIDLE 编辑：如果td中没有position:relative或tr:hover td中的rotateX（0），工具提示将不再显示。。。为什么需要这样做 CSS HTML 可乐可乐数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据数据当一个元素是时，它是相对于它的（通常是它最近的祖先）定位的。应用变换的某些值

我有一个包含从tr:hover和tr:action调用的工具提示的表，使用：after和：before。 JSFIDLE

编辑：如果td中没有position:relative或tr:hover td中的rotateX（0），工具提示将不再显示。。。为什么需要这样做

CSS

HTML


可乐
可乐
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据

当一个元素是时，它是相对于它的（通常是它最近的祖先）定位的。应用

变换的某些值

这就是为什么（如注释中所述）将变换替换为

position:relative

具有相同的效果。它也会创建一个包含块，使绝对元素相对于它定位

当需要创建新的包含块时，使用相对定位的祖先比应用不需要的转换更标准。我建议您将变换替换为

position:relative

哇。小提琴中的css比你的键盘中的css多得多example@graphicdivine我想它会把邮件弄得乱七八糟。。。我应该把它包括在这里吗？这似乎是多余的…可能是因为不清楚绝对定位应该以什么作为参考点…在

td

上切换

position:relative

的旋转似乎可以修复它，至少在Chrome中是这样（但在较老的Firefox中可能会有问题）。好的，在我了解问题所在后，我将在这里包括相关代码。同时，背景已经完全建立在小提琴中。@CBroe谢谢，你的建议有效，但我不明白为什么。参考点肯定有默认的上下文吗？谢谢，回答得很好。当我试图在一个转换的li中绝对定位一个跨度时，遇到了类似的问题。我需要允许第一个跨距向左浮动，而不考虑列表缩进，因此我在容器中建立了定位，并将跨距定位为绝对值。但李上的变换破坏了它，原因与你描述的相同。

/*Striped background to show transparency */
body{
        background-image: linear-gradient(black 10%, transparent 10%);
        background-size: auto 10px;
}
/*Base format*/
table {
    float: left;
    table-layout: auto;
    border-collapse: seperate;
    border-spacing: 1px 0;
    text-align: left;
    cursor: default;
}
td {

    /*Fix 1 ?????????????????????????????????????????????????????????????*/
    position: relative;
    /*???????????????????????????????????????????????????????????????????*/

    /*Dynamic elements*/
    background-image: linear-gradient(to top, #0033CC, #FFFFDB);
    opacity: 0.5;
}

/* Header*/
    th {
        padding-left: 1%; /*not inherited from table*/
        width: 50%;
        color: #FFFF66;
        background-color: #0000CC;
    }
    tr:active th {
        opacity: 0.5;
        color: red;
    }

/* Tool tip base*/
    /*body*/
    tr:hover td:last-child:after, tr:active td:last-child:after {
        white-space: nowrap;
        position: absolute;
        left: calc(100% + 6px);
        border-radius: 5px;
        color: black;
    }
    /*pointer*/
    tr:hover td:last-child:before, tr:active td:last-child:before{
        /*make a little arrow beside the tool tip */
        content: '';
        border: solid;
        width: 0; height: 0;
        border-color: transparent #cacae1 transparent transparent;
        border-width: 6px 6px 6px 0;
        bottom: calc(50% - 6px);
        left: 100%;
        position: absolute;
    }

/*Row hover*/
    tr:hover td {
        /*transform background gradient*/
        background: linear-gradient(to top,#4D70DB,#FFFF00);
        /*transform opacity for the element*/
        opacity: 0.8;

        /*Fix 2 ?????????????????????????????????????????????????????????????*/
        transform: rotateX(0);
        /*???????????????????????????????????????????????????????????????????*/
    }
    /* adjust tool tip */
    tr:hover td:last-child:after {
        content: 'Click to SELECT';
        box-shadow: 0 0 8px #FFFF00;
        background-image: linear-gradient(to top,#4D70DB,#FFFF00);
    }

/*Row select*/
    tr:active td {
        opacity: 1.0;
        color: red;
        background-image: linear-gradient(to top,#4D70DB,#FF8585);
    }
    /* adjust tool tip */
    tr:active td:last-child:after {
        content: 'SELECTED';
        background-image: linear-gradient(to top,#4D70DB,#FF8585);
        box-shadow: 0 0 8px red;
        color: red;
    }

<body>
    <table border="0" width="75%" draggable="false">
        <tr id="header">
            <th><b>COL1</b></th>
            <th><b>COL2</b></th>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>data</td>
            <td>data</td>
        </tr>
    </table>
</body>