0
Div chevauchement avec divs extérieur sur transorm css
.demo-div{
margin:auto;
width:50%;
\t border: 1px solid #d6f5f5;
\t background: #f6f6f6;
\t padding: 20px 5px 20px 5px;
\t min-height: 500px;
}
.demo-div .demo-div-content{
\t padding: 0px !important;
}
.demo-div-inner{
\t background: white;
\t min-height: 70px;
\t 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); \t
\t margin-bottom: 10px;
\t padding: 30px;
transform:translateX(30%);
}<div class="demo-div ">
\t \t \t \t <div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div> </div>
</div>Quand j'applique à traduire div intérieure, il est au-dessus de div parent.
Mais je veux, c'est qu'il devrait rester dans le parent lors de l'application tranform.
J'ai aussi écouteur d'événements sur demo-div-inner, donc en le définissant z-index de div parent, c'est-à-dire démo-div comme -1, écouteur d'événement arrêté de tir.
qui vient réduire la largeur du div contenu intérieur. Il ne résoudra pas mon problème –
si vous utilisez transform: translateX (30%); il va déplacer le contenu de 30% de sa position réelle, donc fondamentalement sans réduire la largeur, vous ne pouvez pas réaliser votre scénario de désir. –
N'est-il pas possible d'utiliser la propriété z index. –