CSS位置仅在更改后更新

Question

我尝试在网站上设置不同图像的位置。我使用Avada主题创建基本列布局（3列，2行）和css，以便在其上进行更具体的配置。我的div包含了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;
    ...
}