こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてフリーランスに。主にWeb制作しています。
趣味のサーフィンなどしながら海沿いでのんびり暮らしています。
htmlを学び始めた頃は本当に理解が全然できなくて、何が分からないかが分からない状態でしたが
段々と慣れてきて、こういう仕組みにすれば、とか応用もできるようになってきました
自分の苦手なところとか必死に理解したところをブログにしたためております。
今回は、画像や要素を重ねたりと色々便利な position:の使い方を書いていきます。
目次
画像と画像を重ねる
position:relativeとposition: absolute;を合わせて画像を重ねることができます。
positionは要素の位置を決めるためのプロパティです。
relativeは相対位置への配置でabsoluteの基準枠となる値になります
<div class="wrapper">
<figure class="image1">
<img src="画像リンク" alt="下の画像">
</figure>
<figure class="image2">
<img src="画像リンク" alt="ブルーシール">
</figure>
</div>.wrapper {
/* 画像を重ねます */
position: relative;
/* 装飾 */
width: 900px;
margin: auto;
}
.image2 img {
/* 画像を重ねます */
position: absolute;
top: 0;
/* 装飾 */
width: 200px;
padding-left: 350px;
padding-top: 230px;
}まずは基準にしたい「.wrapper」にposition: relative; をあてます
基準が決まったら上に重ねたい要素「.image2」の画像要素にposition: absolute; top:0;を指定します。
これだけで画像が重なりますのであとは装飾で整えて好きな位置に設定します。
▶︎
これはHTMLの基礎本を読んで自分なりに応用をした方法なので色々な人のコードを参考にすると勉強になると思います
こちらの本でいつも勉強しております！基礎なのでとっても分かりやすくおすすめです
リンク
画像と要素を重ねる
もちろん画像と要素でも重ねることが可能です！
セクションでちょっとズラした見出しなどのデザインなどにお役立てください
<div class="wrapper">
<figure class="image1">
<img src="画像リンク" alt="">
</figure>
<div class="item">
<p>要素も重なります</p>
</div>
</div> .item{
position: absolute;
top: 0;
/* 装飾 */
padding: 2rem;
margin-top: 200px;
margin-left: 380px;
background-color: rgba(99, 181, 201, 0.668);
letter-spacing: 0.6em;
}positionを駆使して色々なレイアウトや表現が可能になりデザインの幅が広がるのでぜひお試しください〜！
コメント