position

2024 1/05

2023.12.31 2024.01.05

記事の内容

position

positionプロパティは、ボックスの配置方法を指定するプロパティになります。

relative

relativeは、要素に対して相対的な位置に移動されます。

position:relative

記法

.クラス名　{
　position : relative;
　top : 上方向;
　left : 左方向;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>positionプロパティ</title>
  </head>

  <body>
    <p>position：relative</p>
    <div class="element apple-green">
      <div class="element position-relative turquoiseーblue"></div>
    </div>
  </body>
</html>

.element {
  width: 50px;
  height: 50px;
}
.position-relative {
  position: relative;
  top: 20px;
  left: 20px;
}
.apple-green {
  background-color: #bfdd9e;
}
.turquoiseーblue {
  background-color: #56c1db;
}

出力結果

position：relative

absolute

親要素(relative)を基準に絶対位置で指定する。

position:absolute

記法

.クラス名　{
　position : absolute;
　top : 上方向;
　left : 左方向;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>positionプロパティ(absolute)</title>
  </head>

  <body>
    <p>position：absolute</p>
    <div class="element position-relative apple-green">
      <div class="element position-absolute turquoiseーblue"></div>
      <div class="element position-absolute yamabuki"></div>
    </div>
  </body>
</html>

.element {
  width: 50px;
  height: 50px;
}
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}
.apple-green {
  background-color: #bfdd9e;
}
.turquoiseーblue {
  background-color: #56c1db;
}
.yamabuki {
  background-color: #f4af2b;
}

出力結果

position：absolute

[turquoise-blueとyamabukiは同一位置]

fixed

position:fixed

記法

.クラス名　{
　position : fixed;
}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./main.css" />
    <title>positionプロパティ(fixed)</title>
  </head>

  <body>
    <div class="erea">
      <p class="">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic sunt
        tempore illo maiores, dolores aliquam odit maxime similique quidem
        repellendus autem consectetur, molestiae aspernatur incidunt modi ipsa
        ratione quasi odio.
      </p>
      <p class="position-fixed">固定です。</p>
    </div>
  </body>
</html>

.erea {
  width: 200px;
  height: 200px;
  border: solid 1px black;
  overflow: scroll;
}
.position-fixed {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 200px;
  height: 20px;
  background: #ffc778;
  padding: 5px;
}