四角の枠内で丸のコンテンツの位置を指定したいと考えています。

<div class="outer">
  <div class="inner"></div>
</div>
.outer {
  width: 60%;
  height: 50vh;
  margin: 5rem;
  background-color: aqua;
  border: 1px solid #333333;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: coral;
}

image2

positionabsoluteを指定し、topleftを0に指定すると、丸のコンテンツがブラウザの左上に来てしまっています。

丸のコンテンツを、四角の枠内に収めるには、四角のコンテンツにpositionrelativeを指定します。

.outer {
  position: relative;
  width: 60%;
  height: 50vh;
  margin: 5rem;
  background-color: aqua;
  border: 1px solid #333333;
}

ブラウザを確認すると、

image3

丸のコンテンツが、四角の枠内に収まりました。 例えば、画像の中にテキストを挿入したい場合、親要素にpositionrelativeを指定し、テキストにpositionabsoluteを指定します。

<div class="outer">
  <img src="./top.jpg" alt="" />
  <p class="inner">美味しい朝食</p>
</div>
.outer {
  position: relative;
  margin: 5rem;

}

.inner {
  position: absolute;
  bottom: 2rem;
  left: 1rem;
  color: chocolate;
}

.outer img {
  width: 360px;
}

image4

文字が画像内に収まりました。

ブログ一覧