我需要在需要居中的 div 上放置 4 个分层 div。 4 个 div 应分别位于 Angular 落。
我能够让它工作，但不幸的是，当我调整屏幕大小时，它变得困惑。
有人可以帮我更正这段代码，使它看起来像下图吗？
我的代码是
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>最佳答案
查看您的代码。我删除了图形标签上的边距。这是您想要的吗？请参见下文。
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;
margin: 0;/**Added this**/
}
.box-1 {
left: -5%;
top: -15%;
}
.box-2 {
bottom: -15%;
left: -5%;
z-index: 3;
}
.box-3 {
right: -5%;/**Added this**/
top: -15%;
z-index: 2;
}
.box-4 {
bottom: -15%;/**Added this**/
right: -5%;
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>关于html - 响应式设计中的 CSS Div 叠加，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43768487/