css stack divs each other
问题描述:
我似乎无法弄清楚。我已经看到了所有的例子和问题,但我不能让这些div彼此靠近。css stack divs each other
他们有1px的边框,由于某种原因,边框将div移到右边和底部。
我知道如果我禁用边框,那么所有在线代码工作正常,但我需要这些虚线和他们,divs不再对齐。 Z-index不起作用,蓝色的div不显示ontop。
https://jsfiddle.net/x1L2jxnx/14/
<style>
.content {
width: 64px;
height: 64px;
margin: 32px;
background-color: #FFD800;
position: relative;
}
.content div {
width: inherit;
height: inherit;
position: absolute;
border-style: dotted;
}
.margin {
border-color: #03A9F4;
z-index: 3;
}
.border {
border-color: #black;
z-index: 2;
}
.padding {
border-color: #808080;
z-index: 1;
}
</style>
<div class="content">
<div class="margin">
<div class="border">
<div class="padding">
</div>
</div>
</div>
</div>
答
我想这是你想要的。 width
描述了你的<div>
的内部宽度。边框的宽度位于其上方。因此,每个<div>
都具有其继承宽度的两倍边框宽度。
.content {
width: 64px;
height: 64px;
margin: 32px;
background-color: #FFD800;
position: relative;
}
.content div {
top:0;
bottom:0;
right:0;
left:0;
position: absolute;
border-style: dotted;
}
.margin {
border-color: #03A9F4;
z-index: 3;
}
.border {
border-color: #black;
z-index: 2;
}
.padding {
border-color: #808080;
z-index: 1;
}
<div class="content">
<div class="margin">
<div class="border">
<div class="padding">
</div>
</div>
</div>
</div>
我不想边框宽度来的。我希望divs的大小完全相同,并且彼此堆叠在一起。所以你不会看到其他2个div,因为divs彼此重叠。 –