Question

我试图将一些图像堆叠在一起，但是我失去了背景。我使用“ position：absolute”，图像堆叠得很好，因为尺寸是正确的，但是在两种背景下都发生了一些事情（我想连续放3个鸡蛋，这就是为什么在.container中放入.egg-container的原因）。

图片： top-egg bottom-egg

        .container{
            max-width: 50%;
            height: auto;
            background-color: blue;
            margin: 100px auto;
        }

        .container-egg{
            width:21%;
	        height:auto;
	        margin: 30px auto;
            background-color: red;
            position: relative;
        }

        .bottom{
            z-index:2;
        }

        .top{
            z-index:3;
            transform: rotate(0deg);
            margin-top: -0px; 
            transition: margin-top .2s;
        }
        
        .container-egg:hover > .top{
            margin-top: -100px;
            transform: translate(10px, 0) rotate(10deg);
        }

        .position{
            width: 100%;
            position: absolute;
        }

    <div class="container">
         <div class="container-egg">
             <img src="https://i.stack.imgur.com/fY5Cp.png" class="bottom position">
             <img src="https://i.stack.imgur.com/bQwum.png" class="top position">
         </div>
    </div>

Answer 1

由于两个元素均已放置，因此它们已从常规流中移除，并且不再考虑计算它们的容器高度，因此容器的高度等于0。

要解决此问题，只需放置一张图像即可：

.container {
  max-width: 50%;
  background-color: blue;
  margin: 100px auto;
}

.container-egg {
  width: 21%;
  margin: 30px auto;
  background-color: red;
  position: relative;
}
img {
 max-width:100%;
}
.top {
  z-index: 3;
  transform: rotate(0deg);
  margin-top: -0px;
  transition: margin-top .2s;
}

.container-egg:hover>.top {
  margin-top: -30px;
  transform: translate(10px, 0) rotate(10deg);
}

.position {
  width: 100%;
  position: absolute;
  top:0;
  left:0;
}

<div class="container">
  <div class="container-egg">
    <img src="https://i.stack.imgur.com/fY5Cp.png" >
    <img src="https://i.stack.imgur.com/bQwum.png" class="top position">
  </div>
</div>

Answer 2

我认为您想实现以下目标

JSFiddle

CSS代码-

.container {
  max-width: 50%;
  background-color: blue;
  display: block;
}

img.top,
img.bottom {
  width: 100%;
}

.container-egg {
  display: inline-block;
  width: 21%;
  background-color: red;
  position: relative;
}

.bottom {
  z-index: 2;
}

.top {
  z-index: 3;
  transform: rotate(0deg);
  margin-top: -0px;
  transition: margin-top .2s;
}

.container-egg:hover>.top {
  margin-top: -100px;
  transform: translate(10px, 0) rotate(10deg);
}

.position {
  position: absolute;
  top: 0px;
  right: 0px;
}

HTML代码-

<div class="container">
  <div class="container-egg">
    <img src="https://i.stack.imgur.com/fY5Cp.png" class="bottom">
    <img src="https://i.stack.imgur.com/bQwum.png" class="top position">
  </div>
  <div class="container-egg">
    <img src="https://i.stack.imgur.com/fY5Cp.png" class="bottom">
    <img src="https://i.stack.imgur.com/bQwum.png" class="top position">
  </div>
  <div class="container-egg">
    <img src="https://i.stack.imgur.com/fY5Cp.png" class="bottom">
    <img src="https://i.stack.imgur.com/bQwum.png" class="top position">
  </div>
</div>

我正在尝试将一些图像堆叠在一起，但是我失去了背景

2 个答案: