我遇到了一个问题,我的父 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;
}
这是 child 的 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
}
最佳答案
您可以尝试在样式末尾使用 !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
样式。
关于html - 父 div 中的转换是 "overriding"子 div 中的转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47444045/