响应式设计中的CSS Div覆盖

Question

我需要在需要居中的div上有4个over-layering div。 4个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>

Answer 1

查看您的代码。 我删除了数字标签上的边距。 这就是您想要的。请参见下文。

 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>

响应式设计中的CSS Div覆盖

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-05-03 19:42:50

响应式设计中的CSS Div覆盖

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-05-03 19:42:50

解决方案1
2 已采纳 2017-05-03 19:42:50