【コーディング勉強】positionの使い方No.01

Posted on by

positionを使用するときには複数のプロパティがあります。

position: static;既存の設定
position: relative;基準点の設定(absoluteを使用使用する際には必要です。)
position: absolute;絶対値の設定。relativeを使用した親要素を基準に配置が可能です。
position: fixed;ブラウザの幅に合わせて配置の位置を設定します。
position: sticky;スクロールに合わせて要素を固定したい場合などに使用します。

上記各種プロパティの項目があります。
positionは左上を基準に配置されます。

よく使う「position: absolute;」

実際に「position: absolute;」を使って配置していきます。

  <style>
.position_relative{
  position: relative;/*基準点の設定*/
  max-width: 900px;/*わかりやすく横幅の大きさを設定*/
  height: 500px;/*わかりやすく高さを設定します。*/
  margin: 0 auto;/*ブラウザのセンター配置*/
  border:1px solid #ccc;/*わかりやすく線引きます*/
}
.position_absolute{
  position: absolute;/*絶対値を指定します。*/
  top: 100px;/*上からの距離を指定します。*/
  left: 100px;/*左側からの距離を指定します。*/
}
  </style>
  <div class="position_relative"><!--親要素で基準点を配置します-->
    <div class="position_absolute"><!--親要素からどこに配置するかを設定します-->
      <p>配置したい内容を入れます。</p>
    </div>
  </div>
position: absolute

サンプルHTMLはこちらから

よく使う「position: fixed;」

近日中に公開します。