"Position: fixed" wird nicht aktiviert, wenn das übergeordnete Element die CSS-Eigenschaft "transform" hat
In meinem Projekt habe ich einen Bildschirm, der sich von der rechten Seite des Bildschirms aus einblenden lässt, also für das, was ich verwendet habetransform: translateX(100%)
und dann ändern, dass zutransform: translateX(0%)
. es funktioniert einwandfrei Ich kann den Easy-In-Effekt erzielen, aber in diesem Bildschirm habe ich eine Aktionsschaltfläche, die die CSS-Eigenschaft von @ haPosition: Fixed;Bottom: 0px;
aber das funktioniert nicht Ich meine, es klebt nicht am unteren Bildschirmrand.
Hier ist meine JSfiddle:https: //jsfiddle.net/sureshpattu/a1seze4x
Html:
<header>
Heading
</header>
<div class="page__popup page__popup--ease-in-right page__action-btn--visible" style="height: 382px;">
<div class="container">
</div>
<button class="js-action-btn">
SELECT ROOMS
</button>
</div>
Css:
header {
background: #fff;
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
box-shadow: 2px 2px 10px #000;
}
.container {
height: 382px;
}
.page__popup {
position: absolute;
top: 100vh;
z-index: 8;
display: block;
overflow-y: scroll;
max-height: 100vh;
width: 100%;
height: 0;
background: #ffffff;
.js-action-btn {
position: relative;
bottom: -50px;
transition: all 0.25s ease-in-out;
}
//Themes
&--ease-in-bottom {
&.visible {
transition: height 0.25s ease-in-out;
top: 54px;
right: 0;
bottom: 0;
left: 0;
}
}
&--ease-in-right {
transform: translateX(100%);
height: 100vh;
top: 60px;
&.visible {
transition: transform 0.25s ease-in-out;
transform: translateX(0);
}
}
}
.page__action-btn--visible {
.js-action-btn {
background: red;
width: 100%;
height: 30px;
position: fixed;
bottom: 0;
z-index: 10;
box-shadow: 0 7px 4px 10px rgba(0, 0, 0, .12);
}
}