html - Div 在 css 变换上与其他 div 重叠

Question

.demo-div{
  margin:auto;
  width:50%;
	border: 1px solid #d6f5f5;
	background: #f6f6f6;
	padding: 20px 5px 20px 5px;
	min-height: 500px;
}

.demo-div .demo-div-content{
	padding: 0px !important;
}
.demo-div-inner{
	background: white;
	min-height: 70px;
  	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);	
	margin-bottom: 10px;
	padding: 30px;
  transform:translateX(30%);
}

<div class="demo-div ">
				<div class="demo-div-content">
          <div class="demo-div-inner">swipe me out</div>                          </div>
</div>

当我将翻译应用于内部 div 时，它位于父 div 之上。

但我想要的是它应该在应用变换时留在父级中。

此外，我在 demo-div-inner 上有事件监听器，因此将其设置为父 div 的 z-index，即 demo-div 为 -1 ，停止触发事件监听器。

Answer 1

在您的 demo-div-inner 类中添加另一个属性 margin-right。

.demo-div{
  margin:auto;
  width:50%;
	border: 1px solid #d6f5f5;
	background: #f6f6f6;
	padding: 20px 5px 20px 5px;
	min-height: 500px;
   
}

.demo-div .demo-div-content{
	padding: 0px !important;
}

.demo-div-inner{
	background: white;
	min-height: 70px;
  	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);	
	margin-bottom: 10px;
	padding: 30px;
    margin-right: 66px;
    transform:translateX(30%);
}

<div class="demo-div">
		<div class="demo-div-content">
          <div class="demo-div-inner">swipe me out</div>                          
        </div>
</div>