Posición absoluta de CSS y no relativa a su div padre absoluto

Question

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.

html css

0

Kareem Dabbeet 8 oct. 2019 a las 20:32

Answer 1

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>

1

Nenad Vracar 8 oct. 2019 a las 17:40

Answer 2

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>

0

Piyush Teraiya 9 oct. 2019 a las 09:15

Answer 3

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>

0

Temani Afif 8 oct. 2019 a las 20:03

Answer 4

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

0

davidev 8 oct. 2019 a las 17:39

Answer 5

La posición de su hijo tiene que ser absoluta. El posicionamiento absoluto tiene que ver con la página en sí.

-1

Omar Guaba 8 oct. 2019 a las 17:55

Posición absoluta de CSS y no relativa a su div padre absoluto

5 respuestas

Preguntas relacionadas

Nuevas preguntas

html