Question

我遇到的问题是，我的父div的转换属性会覆盖子div，并导致它弄乱其位置。

即使我在子div上设置了transform: none，它仍然会继续覆盖。

这是父母的CSS风格：

.centeredTextPhoto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    text-transform: uppercase;
    font-weight: bold;
}

这是孩子的CSS风格：

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 170px; /* Location of the box */
    left: 0;
    top: 0;
    text-transform: none;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    transform: none
}

Answer 1

您可以尝试使用最后样式的!important元素。

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 170px; /* Location of the box */
    left: 0;
    top: 0;
    text-transform: none;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    transform: none !important
}

它将覆盖任何现有的transform样式。

父div中的变换是＆＃34;覆盖＆＃34;儿童div的变换

1 个答案: