記事の内容
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;
}