2017-12-14 12 views
0

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

#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%;」)。 これがこのように動作し、問題を解決する可能性がある理由はありますか?

+1

あなたはJSFiddle/Plunkrの/ etcへのリンクを持っていた場合、答えるために容易になるだろう。 – Yani

答えて

0

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

#note_col1_row1 
{ 
    position: absolute; 
    ... 
} 
+0

それはおそらく劇的な方法でレイアウトを変えるでしょう。 – isherwood

+0

はい、絶対変種を試しましたが、 "top:"値はそれ以上変更されず、すべてが1つの行に積み重ねられます。/ –

+0

どうやって見えません。あなたはdivsの正確な場所を指定しています...それは 'position:absolute'の目的ですか?絶対配置では、最初の親div( 'position:relative'を持つ最も近い親div)のdivを相対位置にします。 – Ivan86

関連する問題