Quantcast
Viewing all articles
Browse latest Browse all 8640

画像と文字を重ねる

画像と文字を重ねる

通常、HTMLでは要素同士が重なって表示されることはありません。
しかし、CSSを用いることで要素同士を重ねることができます。

position: absolute;

HTMLの要素同士は通常重なって表示されることはありませんが、position: absolute;を使うと、要素同士を重ねて表示することが出来ます。
サイト全体の左上部分を基準とし、そこからの位置をtopleftを用いて指定します。また、rightbottomを併用することも可能です。

style.css
.box1{position:absolute;top:50px;left:70px}.box2{position:absolute;top:120px;left:140px;}

基準位置の変更

position: absolute;の基準位置はサイト全体の左上部分ですが、この基準位置は変更することが出来ます。
基準としたい親要素にposition: relative;と指定すると、その要素の左上部分が基準位置となります。

index.html
<divclass="parent"><imgclass="child"src="./assets/icon.jpg"></div>
style.css
.parent{position:relative;}.child{position:absolute;top:20px;left:15px;}

Viewing all articles
Browse latest Browse all 8640

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>