CSSの位置は、変更後にのみ更新されます

Question

サイト上で異なる画像の位置を設定しようとしています。私は、Avada Themeを使用して、基本的な列レイアウト（3列、2行）とCSSを作成し、より具体的な構成を作成します。私のdivsは、私が使用するimgのIDを含んでいます。私は、ページに下をロードする場合

#note_col1_row1{ 
 
position: relative; 
 
z-index: 1001; 
 
top: 5%; 
 
left: 3%; 
 
-webkit-transform: rotate(-2deg) scale(1.3); 
 
transform: rotate(-2deg) scale(1.3); 
 
} 
 

 
#note_col2_row1{ 
 
position: relative; 
 
z-index: 1001; 
 
    bottom: 4%; 
 
    left: 4%; 
 
-webkit-transform: rotate(4deg) scale(1); 
 
transform: rotate(4deg) scale(1); 
 
} 
 

 
#note_col1_row2{ 
 
position: relative; 
 
z-index: 1001; 
 
    left: 2%; 
 
    bottom: 22%; 
 
-webkit-transform: rotate(2deg) scale(1.2); 
 
transform: rotate(2deg) scale(1.2); 
 
} 
 

 
#note_col3_row1{ 
 
position: relative; 
 
z-index: 1000; 
 
top: 4%; 
 
left: 5%; 
 
width: 170px !important; 
 
-webkit-transform: rotate(-2deg) scale(1.2); 
 
transform: rotate(-2deg) scale(1.2); 
 
} 
 

 
#note_col2_row2{ 
 
position: relative; 
 
z-index: 1000; 
 
top: 5%; 
 
left: 5%; 
 
-webkit-transform: rotate(-4deg) scale(1.3); 
 
transform: rotate(-4deg) scale(1.3); 
 
} 
 

 
#note_col3_row2{ 
 
position: relative; 
 
z-index: 1000; 
 
bottom: 15%; 
 
-webkit-transform: rotate(2deg) scale(0.8); 
 
transform: rotate(2deg) scale(0.8); 
 
}

だから今私の問題は、トップ...位置はdiv要素には適用されませんされています。これは、F12でデバッグビューを開始し、値を他の値に変更する場合にのみ発生します（たとえば、「bottom：22％;」から「bottom：21％;」）。 これがこのように動作し、問題を解決する可能性がある理由はありますか？

Answer 1

はabsoluteではなく、このようなrelativeに位置を設定してみてください：

#note_col1_row1 
{ 
    position: absolute; 
    ... 
}