Nguyen Vinh Linh Nguyen Vinh Linh - 1 month ago 7
CSS Question

CSS, overlap children div but the width of parent div stay the same

I would like to make an overlap of children div using

position:relative
and
left
attribute. Because of overlapping, I would like to reduce the parent width. However, in fact, the parent div does not reduced.
Here is my codepen. 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;
}


I would like to remove the exceed red section

As you can see, the
mother
div width does not fit to its own children width and there is an exceed red section. I would like to remove the exceed red section. Do you know any solution here. One more point. I try to avoid
flex
and
float
.

Update for Kumar why not reduce the width of children by half.



I suppose to make a cluster of image which overlap each other. Let imagine those
child
div is round border like this. As you can see, it's not a good idea to set the width of child to half.

enter image description here

Answer Source

You can use negative margins on the inner divs (margin-left: -25px) while giving the parent div an offset margin - (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>

This is also easy to animate in case you want to remove the overlap on :hover

Rough animation draft:

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>