▼▼TIL 12・CSS属性-position

6486 ワード
TIL CSS html テキストリンク
  • position : static
  • position : relative
  • position : absolute
  • position : fixed

    • 1. static


    すべてのラベルのデフォルト値.
    順番は左->右/上->下

    2. relative

    staticを基準にラベル位置を少し変更したい場合に使用します.
    ただし、top、bottom、left、right等の属性のうち少なくとも1つ以上とともに用いられる.
    <コード例>
    .top {
  position: relative;
  top: 5px;
  z-index: 1;
}

    3. absolute


    特定の親に対して絶対的な地位に立つことができる.
    親の位置に相対的、絶対的、固定的ないずれかが存在する場合、親には絶対的である.
    <コード例>
    #absolute {
  background: yellow;
  position: absolute;
  right: 0;
}

#parent {
  position: relative;
  width: 100px;
  height: 100px;
  background: skyblue;
}

#child {
  position: absolute;
  right: 0;
}
    上記のコードでは、absoluteは親ラベルに「position:relative」がないため、bodyを基準に最も右側に配置されます.
    逆に、#childの親ラベル#parentは「position:relative」であるため、それを基準として最も右側に位置する.
    ＜実行画面＞

    4. fixed

    fixedを使用すると、下にスクロールしても常にその位置に配置されます.
    主にWebページにトップバーまたはサイドバーを固定するために使用されます.
    <コード例>
    <div>
  <div id="fixed">fixed</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
    ＜実行画面＞
    BOJ 17136-カラーペーパーの貼り付け
    文字列->別のデータ型に変換