CSS div覆盖在响应式设计中

我需要在需要居中的div上有4个覆盖div的div。四个div应该分别位于角落。CSS div覆盖在响应式设计中

我能够得到这个工作，但不幸的是，当我调整我的屏幕大小时，它变得不合时宜。

有人可以帮我纠正这段代码，使它看起来像下面的图片吗？

image of what I am trying to achieve

我的代码是

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>

来源

2017-05-03 Zubair

看你的代码。我删除了数字标签上的边距。这是你想要的吗？见下面。

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; 
 
\t 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>

来源

2017-05-03 19:42:50 blecaf

CSS div覆盖在响应式设计中

回答

相关问题