親divのTransformが子divの変換を「上書き」しています

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スタイルを上書きします。