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>

当我将translate应用于内部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>

Div与css transorm上的外部div重叠

1 个答案: