0
divにレイヤリングdivを4つ配置する必要があります。 4つの部門はそれぞれコーナーにあるべきです。レスポンシブデザインのCSS Divオーバーレイ
私はこれを動作させることができましたが、残念ながら、私の画面のサイズを変更すると、それは雑然としています。
誰かが次の画像のようにこのコードを修正するのを手伝ってもらえますか？
マイコードは、あなたのコードを見てみると
body {
color: #fff;
font: 600 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.box-set,
.box {
border-radius: 6px;
}
.box-set {
background: #eaeaed;
height: 160px;
position: relative;
top: 200px;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
.box {
background: #2db34a;
border: 2px solid #ff7b29;
height: 80px;
line-height: 80px;
position: absolute;
text-align: center;
width: 80px;
}
.box-1 {
left: -5%;
top: -15%;
}
.box-2 {
bottom: -15%;
left: -5%;
z-index: 3;
}
.box-3 {
left: 88%;
top: -15%;
z-index: 2;
}
.box-4 {
bottom: -15%;
left: 88%;
z-index: 1;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box-set">Year sales
<figure class="box box-1">Jan 1100</figure>
<figure class="box box-2">Feb 2200</figure>
<figure class="box box-3">March 3300</figure>
<figure class="box box-4">April 4400</figure>
</div>
</body>