yosinobun3
@yosinobun3

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

画像のデザインを再現するにはどうしたらいいですか?

解決したいこと

ここに解決したい内容を記載してください。

下記画像のデザインの右側、正方形の上に画像を上からずらして配置するデザインをHTMLとCSSで再現したいのですが、いくら考えても変な感じになってしまいます。

どなたか、模範例のコードを教えていただけたら嬉しいです。

発生している問題・エラー

スクリーンショット 2024-05-29 181200.png





### 自分で試したこと
<div class="system_picture">
 <div class="container">
  <div class="system_picture_box">
   <img src="solutions_picture/system.jpg">
    </div>
    <div class="box"></div>
    </div>
</div> 



.container {
  display: flex;
}

.system_picture_box {
  position: absolute;
}

.box {
  width: 272px;
  height: 272px;
  background-color: #E6F0F3;
  position: relative;
  z-index: -1;
  top: -90px;
  
}
0

1Answer

absoluteと組み合わせる時はrelativeを基準側にして親子要素にします.

この辺はなんちゃってライターが雑な説明をあちこちに書くせいで(大概上のリンク先もアレなんだけども)分かりにくいプロパティになってます.

1Like

Your answer might help someone💌