positon（ポジション）
とりあえず、div baseの中に
div relative
div absolute
div fixed
の3つが入っている形を作ってみよう
--->position.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポジション</title>
<link rel="stylesheet" href="position.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>POSTION</h1>
<div class="base">
<div class="relative">
relative
</div>
<div class="absolute">
absolute
</div>
<div class="fixed">
fixed
</div>
</div>
<script src="position.js"></script>
</body>
</html>
--->position.css
body{
background: #FFc;
}
div{
margin: 10px;
border: 1px solid #ccc;
padding: 5px;
}
.base{
background: #fff;
height: 200vh; //ブラウザの高さの2倍
border: solid 1px #ccc;
}
.relative{
background: #ffa;
width: 500px;
height: 300px;
background: linear-gradient(to top, rgba(217,177,217,0.7) 0% ,rgba(151, 217, 225, 0.7) 100%),url(img/fish_kue2.png);
opacity: 80%; /*透過度*/
position:relative; /*相対配置 もといた位置を起点にdiv自体を移動*/
top: 100px;
left: 200px;
}
.absolute{
background: #faf url(img/animal_chara_computer_azarashi.png);
width: 500px;
height: 200px;
position: absolute; /*絶対配置 0,0を起点に移動*/
bottom: 50px;/*bottomにすると右下を起点に移動*/
right: 20px;/*rightにすると右下を起点に移動*/
opacity: 70%;
}
.fixed{
background: #aff;
width: 500px;
height: 200px;
opacity: 50%;
position: fixed; /*固定配置 スクロールしても動かない*/
top: 410px;
}
.baseに追加
position: relative;
/*親要素にrelativeをかけると、子要素の絶対配置が「親要素の領域」を基準とする*/
これはrelativeじゃなくfixedをかけても同じになる
