0

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...

8
  • si quitas la propiedad position:relative de la clase first se deja de superponer, no se si es lo que quieres
    – gmarsi
    el 3 jun. 2017 a las 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
    el 3 jun. 2017 a las 20:16
  • pero cómo quieres que quede exactamente? cuál es la duda?
    – gmarsi
    el 3 jun. 2017 a las 20:19
  • Debes aclarar mejor que es lo que pretendes, ten en cuenta que tal y como lo estás diciendo ahora te contradices.
    – lromeraj
    el 3 jun. 2017 a las 20:21
  • Poder posicionarlo 100 px (por ejemplo) por debajo del elemento superior
    – Jogofus
    el 3 jun. 2017 a las 20:21

2 respuestas 2

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

6
  • Entonces que ventajas presenta el position?
    – Jogofus
    el 3 jun. 2017 a las 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
    el 3 jun. 2017 a las 20:52
  • ¿Podrías decirme que casos son esos?
    – Jogofus
    el 3 jun. 2017 a las 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
    el 3 jun. 2017 a las 20:58
  • @Jogofus no obstante hay más casos y posibilidades.
    – lromeraj
    el 3 jun. 2017 a las 20:58
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;
}
1
  • 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; } el 3 jun. 2017 a las 20:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.