Div se superpone usando propiedad top

Question

Pues estoy desarrollando una página web, y tengo algo parecido a esto:

HTML

<section>
 <article class="first">
  <!-- Resto de estructura -->
 </article>

 <article class="second">
  <!-- Resto de estructura -->
 </article>
</section>

CSS:

.first{
 width: 100%;
 height: 300px;
 background-color:blue;
 position: relative;
 top: 100px;
}

.second{
 width: 100%;
 height: 300px;
 background-color:red;
}

El problema está en que el article first se superpone por encima y no siguen el flujo correcto. Yo pensaba que esto pasaba cuando se usaba la position: absolute...

si quitas la propiedad `position:relative` de la clase `first` se deja de superponer, no se si es lo que quieres — gmarsi, Jun 03 '17 at 20:15
Pero la idea es poder posicionar el div o article (o el elemento que sea) segun quiera, si quito la position relative no podré posicionarlo... — Jogofus, Jun 03 '17 at 20:16
Debes aclarar mejor que es lo que pretendes, ten en cuenta que tal y como lo estás diciendo ahora te contradices. — lromeraj, Jun 03 '17 at 20:21
Poder posicionarlo 100 px (por ejemplo) por debajo del elemento superior — Jogofus, Jun 03 '17 at 20:21
Yo pensaba que usando la propiedad positon:relative y dandole el punto exacto donde querias situarlo, los elementos restantes seguirían el flujo normal, y se situarían uno debajo del otro, pero en este caso quedarían superpuestos... — Jogofus, Jun 03 '17 at 20:22
@Jogofus No, los elementos no se reajustan en la página. Siguen el flujo normal de la página en cuanto a posicionamiento se refiere. Por ejemplo, si utilizas `position: absolute` y no hay ningún `position: relative` que lo englobe entonces se saldrá del flujo normal de la página y se posicionará al principio de la página (si no lo has posicionado). Esto con `position: relative` no pasa. Si quieres más ejemplos de cómo funciona los puedes ver aquí: https://es.stackoverflow.com/questions/37930/cual-es-la-diferencia-entre-position-relative-position-absolute-y-position — Francisco Romero, Jun 03 '17 at 22:09

score 0 · Answer 1 · answered Jun 03 '17 at 20:26

0

Con esto serviría:

.first{
   width: 100%;
   height: 300px;
   background-color:blue;
   position: absolute;

}

.second{
   width: 100%;
  height: 300px;
  background-color:red;
  top:100px;
  position: absolute;
}

answered Jun 03 '17 at 20:26

gmarsi

1,402
4
24
46

Yo creo que lo que se refiere es uno encima del primero separados por 100px. `first{ background-color:blue; position: static; } .second{ background-color:red; position: absolute; top: 100px; }` – James Peter Jun 03 '17 at 20:38

score 0 · Accepted Answer · answered Jun 03 '17 at 20:27

0

La mejor opción para hacer lo que pretendes es usar la propiedad margin, con eso no lo estás posicionando, simplemente estás poniendo un margen en la parte superior de tu elemento, esto hará que no se superposicione. Te dejo el código basándome en tu ejemeplo:

.first{
    width: 100%;
    height: 300px;
    background-color:blue;
    margin-top: 100px;
}

.second{
    width: 100%;
    height: 300px;
    background-color:red;
}

 <section>
 <article class="first">
    <!-- Resto de estructura -->
 </article>

 <article class="second">
  <!-- Resto de estructura -->
 </article>
</section>

Espero que te sirva de ayuda

answered Jun 03 '17 at 20:27

lromeraj

1,886
12
30

Entonces que ventajas presenta el position? – Jogofus Jun 03 '17 at 20:41
@Jogofus la posición está para otros casos, y tiene sus utilidades en otros casos, pero en el tuyo lo más óptimo es lo que te he dicho. – lromeraj Jun 03 '17 at 20:52
¿Podrías decirme que casos son esos? – Jogofus Jun 03 '17 at 20:55
@Jogofus a medida que vayas programando te irás dando cuenta, pero por ejemplo en las posiciones corregidas `position: fixed` la posiciones corregidas sirven para cuando quieres que un elemento se quede fijo en la pantalla, como por ejemplo un menú de navegación. – lromeraj Jun 03 '17 at 20:58
@Jogofus no obstante hay más casos y posibilidades. – lromeraj Jun 03 '17 at 20:58
@Jogofus al fin y al cabo, ¿te sirvió mi respuesta? – lromeraj Jun 03 '17 at 20:59

Div se superpone usando propiedad top

2 Answers2