positionの【absoluteやrelative】画像や図形の上に重ねる指示のCSS

2023-02-14

relativeで基準画像や図形を指定して、absoluteと位置の指定で配置をしていくよ。absolute単体で使うと画面全体の左上からの指示になるよ。

画像の上に表示する手順

STEP

position:relative

下に配置する画像のCSSに記述する。親要素になる。基準画像を指定。

STEP

position:absolute

画像の上に配置したい図形や文字のCSSに記述。子要素になる。画像の上に配置する指示。

STEP

top,right,bottom,leftのいずれかを指定

relativeで指定した画像からの位置について指定する。左上が基点となる。上記から2つ使って指示することが多いよ。

基本構文

CSS

親セレクタ （基準値）{
  position: relative;
}

子要素セレクタ {
  position: absolute;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

図形の中に図形を配置する

完成形

HTML

<div class="box1">
    <div class="box2"></div>
</div>

CSS

.box1 {
  width: 150px;
  height: 200px;
  background: rgb(235, 135, 212);
  position: relative;
}
.box2 {
  width: 50px;
  height: 100px;
  background: rgb(255, 247, 107);
  position: absolute;
  top: 20%;
  left: 10%;
}

画像の上にテキストBOXをのせる

完成形

にゃんにゃんにゃんにゃんにゃんにゃんにゃんにゃん。

HTML

  <div class="area">
    <img src="AdobeStock_324900134.jpg" alt="">
    <div class="moji-box">
        にゃんにゃんにゃんにゃんにゃんにゃんにゃんにゃん。
    </div>

CSS

  .area {
    position:  relative;       
    height:  130PX;            
    width:100px;              
}
.moji-box {
    position:  absolute;           
    width:  100%;                           
    background-color: rgba(238, 89, 225, 0.7);   
    color:#ffff; 
    box-sizing:  border-box;                
    bottom:0;                                                
    font-size: 0.75rem;                        
}

続く