Responsive Designingメソッドを使用する場合、divの位置の相対値を使用できますか？

Question

レスポンシブウェブサイトを完全に作成したい場合は、部門の相対：相対を使用できますか。 私は思考が問題を引き起こすと思っており、それはベストプラクティスではありません。

Answer 1

もちろん、positionプロパティを追加/削除する場合は、常にメディアクエリを使用できます。

@media (min-width: 768px) { .mySelector { position: relative } }

上記のコードはブラウザが767px

Answer 2

position: relativeよりも広い場合にのみ、それを追加非常に異なるビューポートサイズで使用される場合、要素は、問題となる可能性がある（移動していることを自動的に意味するものではないと固定値）で：あなたはleft、right、topまたはbottom設定を使用しない場合

、何も正常な流れの外に移動されていないが、その後position: relativeはまだ有用です。 left、right,topまたはbottom（および）の相対値を使用すると、これらは完全に応答します。

コメントの後に追加：

私は例を追加しました。実際には私は前に間違っていました。水平センタリングにmargin: 0 autoを使用すると、position: relativeは必要ありません。しかし、この例ではまだ2回使用していましたが、内側のDIVにはtopのパーセンテージ値を使用しました。これにより、他のDIV（上下20％、下端60％サイズを変更する - あなたは絶対DIVのサイズの変更、だけでなく、デフォルトposition: static

html, body { 
 
    height: 100%; 
 
    } 
 
.x { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    height: 50%; 
 
    background: #fa0; 
 
    } 
 
.y { 
 
    position: relative; 
 
    top: 20%; 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    height: 60%; 
 
    text-align: center; 
 
    background: #a0f; 
 
    }

<div class="x"> 
 
    <div class="y"> 
 
    some text 
 
    </div> 
 
    </div>

Answer 3

はい、などに影響を与えないだろうとtopパラメータ、ではないだけが表示されますMatthewの答えごとに、レスポンシブサイトの任意のポジションプロパティを使用できます。彼らはデザインの文脈で彼らが何をしているかをもっと知っています。

ここでは、positionプロパティのさまざまな側面について説明します。

https://www.youtube.com/watch?v=-vo0HzNHL3U