CSSでの重ね方法を教えて頂きたいです。

Question

borderスタイルの上に画像を重ねたいです。（上にはみ出る感じですね）
書き方を教えて頂きたいです。

よろしくお願いします。

Answer 1

便宜上imgの大きさを適当に決めていますが、以下はborder-topの丁度真ん中に配置する書き方です。

<style>
.box{
  border: 1px solid;
  position: relative;
  width: 500px;
  height: 700px;
  margin-top: 50px;
}
.img {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  background: black;
}
</style>

<div class="box">
  <img class = "img">
</div>

Comments

[gameoverseas]

ありがとうございます！解決しました。