htmlめも

position

よくやるのが親要素にrelativeつけて
子要素にabsoluteつけるやつ。
そうするとrelativeつけた親要素を起点に子要素がポジショニングしてくれる。

ちなみにbottomとかtopは
positionとセットで使わないと意味を成さない。

test.html

<div class="parent1">
    <div class="parent2">
        <p>指定なし</p>
        <p id="absolute">指定あり</p>
    </div>
</div>

test.css

#absolute {
    bottom: 0px;
    position: absolute;
}

p {
    background: aqua;
    width: 100;
    margin: 0px;
}

.parent2 {
    background-color: beige;
    padding: 50px;
    /* position: relative; */ /*コメントを外すと…*/
}

.parent1 {
    /* position: relative; */ /*コメントを外すと…*/
    padding: 50px;
}

フッター固定したい時とか使える。

footer_test.html

<div class="wrapper">
    <div class="container">
      <p>現在、このサイトは製作中です。<br>
        現在、このサイトは製作中です。<br>
        現在、このサイトは製作中です。<br>
      </p>
    </div>
    <footer>
      <p>(c)copy right</p>
    </footer>
</div>

test.css

.wrapper {
    min-height: 100vh;
    position: relative;
}
footer {
	position: absolute;
	bottom: 0;
	background-color: #89c7de;
	width: 100%;
}

参考サイト
https://techacademy.jp/magazine/19410
https://dot-blog.jp/news/css-bottom-fix/