Hay un padre div que tiene posicionamiento absoluto con un niño que tiene posicionamiento absoluto. Mi problema es hacer que el elemento secundario sea relativo a la página completa, no a su elemento primario:
Ejemplo:
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
}
.child {
position: fixed;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: purple;
z-index: 2;
}
@keyframes move {
50% {
transform: translateX(25px);
}
}
<div class="parent">
<div class="child"></div>
</div>
El objetivo es hacer que el pequeño div morado se fije en la parte superior izquierda de la pantalla y se oculte cuando el gran div azul se mueva fuera de él. Intenté sticky - fixed
con el mismo resultado.
5 respuestas
Puede usar animación en la dirección opuesta para el elemento secundario y esto hará que el elemento secundario se vea como estático en una posición.
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
}
.child {
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: purple;
animation: moveBack 2s infinite;
z-index: 2;
}
@keyframes move {
50% {
transform: translateX(25px);
}
}
@keyframes moveBack {
50% {
transform: translateX(-25px);
}
}
<div class="parent">
<div class="child"></div>
</div>
Puedes usar este código
body {
margin: 0;
padding: 0;
}
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
}
.child {
position: fixed;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: purple;
z-index: 2;
}
@keyframes move {
50% {
transform: translateX(25px);
}
}
<div class="parent">
<div class="child"></div>
</div>
Puedes considerar una idea usando la animación clip-path
.parent {
position: absolute;
top: 10px;
left: 10px;
width: 125px;
height: 100px;
background-color: blue;
overflow: hidden;
animation: move 2s infinite;
clip-path:polygon(0 0, calc(100% - 25px) 0,calc(100% - 25px) 100%, 0 100%);
}
.child {
position: absolute;
top: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: purple;
}
@keyframes move {
50% {
clip-path:polygon(25px 0, 100% 0,100% 100%, 25px 100%);
}
}
<div class="parent">
<div class="child"></div>
</div>
El posicionamiento absoluto se comporta como el posicionamiento relativo para divs secundarios.
Debe mover el elemento secundario fuera del elemento primario para que quede fijo en relación con la página / cuerpo.
De lo contrario, child
siempre se posicionará en relación con parent
La posición de su hijo tiene que ser absoluta. El posicionamiento absoluto tiene que ver con la página en sí.
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].