Html 父div中的转换为；压倒一切；子div中的转换

我遇到了一个问题，父div的transform属性覆盖了子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;
}

.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
}

以下是孩子的CSS样式：

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

.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
}

---

您可以尝试使用

！重要信息

样式末尾的元素

.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
}

---

它将覆盖任何现有的

转换

样式

文本转换：无！重要的我避开

！大多数时候都很重要。相反，找到一种使子选择器更具体的方法，如：
.centeredTextPhoto.modal{transform:none；}
进行反向转换显示HTML将有所帮助。提供更好的具体性总是比使用
更好！重要信息