CSS,与子 div 重叠,但父 div 的宽度保持不变
CSS, overlap children div but the width of parent div stay the same
我想使用 position:relative
和 left
属性重叠子项 div。由于重叠,我想减少父宽度。但是,实际上父div并没有减少。
这是我的代码笔。 https://codepen.io/anon/pen/eRMMwW
HTML
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
CSS
div.mother {
background-color: red;
display:inline-block;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
}
div.child:nth-child(2) {
left: -25px;
background-color: yellow;
}
div.child:nth-child(3) {
left: -50px;
background-color: pink;
}
div.child:nth-child(4) {
left: -75px;
background-color: green;
}
如你所见,mother
div 宽度不适合它自己的子宽度,并且有一个超出红色的部分。我想删除超出红色的部分。你知道这里有什么解决办法吗?还有一点。我尽量避免 flex
和 float
.
更新 Kumar 为什么不将子项的宽度减半。
我想制作一组相互重叠的图像。想象一下 child
div 是这样的圆形边框。如您所见,将 child 的宽度设置为一半不是一个好主意。
在mother
cssclass中应用background:transparent
。
div.mother {
background: transparent;
display:inline-block;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
border-radius:2em;
}
div.child:nth-child(2) {
left: -25px;
background-color: yellow;
}
div.child:nth-child(3) {
left: -50px;
background-color: pink;
}
div.child:nth-child(4) {
left: -75px;
background-color: green;
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
您可以在内部 divs (margin-left: -25px
) 上使用 negative margins,同时给父级 div 一个偏移边距 - (margin-left: 25px
)
div.mother {
background-color: red;
display: inline-block;
margin-left: 25px;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
margin-left: -25px;
}
div.child:nth-child(2) {
background-color: yellow;
}
div.child:nth-child(3) {
background-color: pink;
}
div.child:nth-child(4) {
background-color: green;
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
如果您想删除 :hover
上的重叠,这也很容易制作动画
动画草稿:
div.mother {
background-color: red;
display: inline-block;
margin-left: 25px;
z-index: 1; /* botttom layer */
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
margin-left: -25px;
}
div.child:nth-child(2) {
background-color: yellow;
z-index: 2; /* botttom layer +1 */
}
div.child:nth-child(3) {
background-color: pink;
z-index: 3; /* botttom layer +2 */
}
div.child:nth-child(4) {
background-color: green;
z-index: 4; /* botttom layer +3 */
}
div.child:hover {
position: relative;
animation-name: slide;
animation-duration: 1s; /*animation speed */
animation-iteration-count: 1;
animation-fill-mode: forwards; /* makes animation stop at 100% and not revet back to original state */
cursor: pointer;
}
div.child:nth-child(4):hover {
animation-name: none; /* doesn't need animation othewise you would see red background from parent div */
}
@keyframes slide {
0% {
margin-right: 0px;
}
100% {
margin-right: 20px; /* pushes the next div out so you can see current div. */
}
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
我想使用 position:relative
和 left
属性重叠子项 div。由于重叠,我想减少父宽度。但是,实际上父div并没有减少。
这是我的代码笔。 https://codepen.io/anon/pen/eRMMwW
HTML
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
CSS
div.mother {
background-color: red;
display:inline-block;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
}
div.child:nth-child(2) {
left: -25px;
background-color: yellow;
}
div.child:nth-child(3) {
left: -50px;
background-color: pink;
}
div.child:nth-child(4) {
left: -75px;
background-color: green;
}
如你所见,mother
div 宽度不适合它自己的子宽度,并且有一个超出红色的部分。我想删除超出红色的部分。你知道这里有什么解决办法吗?还有一点。我尽量避免 flex
和 float
.
更新 Kumar 为什么不将子项的宽度减半。
我想制作一组相互重叠的图像。想象一下 child
div 是这样的圆形边框。如您所见,将 child 的宽度设置为一半不是一个好主意。
在mother
cssclass中应用background:transparent
。
div.mother {
background: transparent;
display:inline-block;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
border-radius:2em;
}
div.child:nth-child(2) {
left: -25px;
background-color: yellow;
}
div.child:nth-child(3) {
left: -50px;
background-color: pink;
}
div.child:nth-child(4) {
left: -75px;
background-color: green;
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
您可以在内部 divs (margin-left: -25px
) 上使用 negative margins,同时给父级 div 一个偏移边距 - (margin-left: 25px
)
div.mother {
background-color: red;
display: inline-block;
margin-left: 25px;
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
margin-left: -25px;
}
div.child:nth-child(2) {
background-color: yellow;
}
div.child:nth-child(3) {
background-color: pink;
}
div.child:nth-child(4) {
background-color: green;
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
如果您想删除 :hover
动画草稿:
div.mother {
background-color: red;
display: inline-block;
margin-left: 25px;
z-index: 1; /* botttom layer */
}
div.child {
background-color: blue;
width: 50px;
height: 50px;
display: inline-block;
position: relative;
margin-left: -25px;
}
div.child:nth-child(2) {
background-color: yellow;
z-index: 2; /* botttom layer +1 */
}
div.child:nth-child(3) {
background-color: pink;
z-index: 3; /* botttom layer +2 */
}
div.child:nth-child(4) {
background-color: green;
z-index: 4; /* botttom layer +3 */
}
div.child:hover {
position: relative;
animation-name: slide;
animation-duration: 1s; /*animation speed */
animation-iteration-count: 1;
animation-fill-mode: forwards; /* makes animation stop at 100% and not revet back to original state */
cursor: pointer;
}
div.child:nth-child(4):hover {
animation-name: none; /* doesn't need animation othewise you would see red background from parent div */
}
@keyframes slide {
0% {
margin-right: 0px;
}
100% {
margin-right: 20px; /* pushes the next div out so you can see current div. */
}
}
<div class="mother">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>