CSS，重叠子div但父div的宽度保持不变

Question

我想使用position:relative和left属性重叠子div。由于重叠，我想减少父宽度。但是，事实上，父div并没有减少。 这是我的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;
}

正如您所看到的，mother div宽度不适合其自己的子宽度，并且有一个超出红色部分。我想删除超红部分。你知道任何解决方案吗？还有一点。我尽量避免flex和float。

Kumar的更新为什么不将孩子的宽度减少一半。

我想制作一个彼此重叠的图像聚类。假设那些child div是这样的圆形边界。如您所见，将子宽度设置为一半并不是一个好主意。

Answer 1

您可以在内部div（margin-left: -25px）上使用negative margins，同时为父div提供偏移边距 - （margin-left: 25px）

＆＃13;

＆＃13;

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;
}

＆＃13;

<div class="mother">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您要删除:hover

上的重叠，也可以轻松制作动画

粗略动画草稿：

＆＃13;

＆＃13;

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. */
  }
}

＆＃13;

<div class="mother">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在background:transparent css类中应用mother。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div class="mother">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>

＆＃13;

＆＃13;

＆＃13;