css - CSS - margin-left、上部の代替

Question

DOM に要素を配置するには、ほとんどの場合、margin-left、margin-top : px を使用します。代替手段はありますか?同じものを使用することは良い習慣ですか?

Answer 1

通常、要素を DOM 内に配置するには、position:relative;and / orposition:absolute;が使用されます。

要素を設定position:absolute;すると、上、右、下、左のプロパティを使用してドキュメント内の位置を設定できます。

その位置を別の要素に設定する場合は、親要素を に設定しposition:relative;ます。これは通常のシナリオだと思います

たとえば、次のようにmargin-top:20px; margin-left:20px;なります。

<div id="outer">
    <div id="inner">
    </div>
</div>  
<style>
#outer { position:relative; }
#inner { position:absolute; top:20px; left:20px; }
</style>

これらのプロパティを使用するのは少し難しいかもしれませんが、柔軟性が向上します。詳細については、こちらをご覧ください。