2017-11-15 11 views
-1

私は絶対位置のdivを2つ持っています。私がしなければならない何を私のdivのdivの下のメディアクエリは絶対divですか?

.left-block { 
    position: absolute; 
    left: 0px; 
    top: 84px; 
    background-color: #ffdc3a; 
    width: 53.95833333333333%; 
    height: 100vh; 
}. 

right-block { 
    position: absolute; 
    background-color: white; 
    left: 53.95833333333333%; 
    top: 84px; 
    width: 46.041666666666664%; 
    height: 100vh; 
} 

例?私はこれを試してみたが、div要素はお互いに来て、ちょうどあなたのメディアクエリでの相対的な位置を削除し、代わりにposition: static;を追加し、他の正確かつ失われた背景色の下に1

@media screen and (max-width: 1024px) { 


.left-block { 
    position: relative !important; 
    width: 100% !important; 
} 

.right-block { 
    position: relative !important; 
    width: 100% !important; 
} 

} 
+0

はあなたがcodepen、jsbinまたは類似した何かであなたのコードの例を私たちに提供できる作業を参照してください。 – Zvezdas1989

+0

リセットトップ:0と左:0そしてディスプレイを追加する:インラインブロック – Roy

+0

HTMLも表示し、 'flexbox'や新しい' css-grid'を使うときに '絶対'を使うのはなぜですか? – dippas

答えて

0

になっていませんでした。

あなたのHTMLコードでは、右のブロックが最初になるはずです。

0

ここにはいくつかのタイプミスがあります。私もあなたのコードを少し整えた。 snippit

.left-block { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 84px; 
 
    background-color: #ffdc3a; 
 
    width: 53.95833333333333%; 
 
    height: 100vh; 
 
} 
 

 
.right-block { 
 
    position: absolute; 
 
    background-color: #000; 
 
    left: 53.95833333333333%; 
 
    top: 84px; 
 
    width: 46.041666666666664%; 
 
    height: 100vh; 
 
} 
 

 
@media screen and (max-width: 1024px) { 
 

 
    .left-block, .right-block { 
 
    position: static !important; 
 
    width: 100% !important; 
 
    } 
 

 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="right-block"></div> 
 
    <div class="left-block"></div> 
 
</body> 
 
</html>

関連する問題