0

se que la posicion absoluta y relativa tienen de diferencia que la absoluta edita el flow de la pagina y que se deberia usar dentro de una rrelattiva por lo general, pero cuando deberiamos usarlas ? en este codigo no logro ver la diferencia de usarlo o no, y la relativa sin la absoluta deberia remplazar al margen para el posicionamient ? https://codepen.io/anon/pen/yPZeaE gracias

the code :

.logo {
  height:300px;
  background-color: #e1e1e1;
  position:relative;
}
.logo img {
  width:300px;
  position: absolute;
  right: 10px;
  top: -50px;
}
.logo img.logo2 {
  right: 10px;
  top: -50px;
}


<div class="logo">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>
9
  • buenas amigo estamos en el stackoverflow en español por favor modifica la pregunta a español . Commented el 2 dic. 2017 a las 14:29
  • perdon ahora lo modifico xd Commented el 2 dic. 2017 a las 14:30
  • @FranciscoRomero ya se la diferencia :( Commented el 2 dic. 2017 a las 14:31
  • @PatricioMartin Realmente en tu ejemplo ambas imágenes están heredando el position: absolute del estilo .logo img. Es por eso que la segunda imagen también está cogiendo los estilos right y top. Commented el 2 dic. 2017 a las 14:36
  • osea que se hereda automaticamente el posicionamiento absoluto si tiene un padre como relativo ?? Commented el 2 dic. 2017 a las 14:39

1 respuesta 1

1

Para definir cuando usar position:absolute y cuando position:relative:

Cuando queremos que el elemento NO dependa del flujo natural de los otros elementos usamos absolute y este se posiciona con coordenadas topy left. siempre inicia en la esquina superior izquierda de su contenedor.

Para elementos con un posicionamiento relativo, el origen de sus coordenadas no es la esquina superior izquierda del elemento contenedor, sino la posición que ocuparían naturalmente, de no estar condicionados o posicionados con top o left.

EJEMPLOS:

Cuando usa position:relative y lo posiciona con margin el resultado es que afectara a los elementos de orden natural, note como con el margen del .logo1 no solo se desplaza el mismo, sino que tambien desplaza al siguiente elemento .logo2:

#normal{
  border: 5px solid black;
}
#normal .logo0{
  width:100px;
  border: 2px solid yellow
}
#normal .logo1{
  width:100px;
  position: relative;
  border: 2px solid red;
  margin-left: 30px; //posicion con margen
}
#normal .logo2 {
  width:100px;
  border: 2px solid blue;
}
<div id="normal">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>

Cuando usa position:relative y lo posiciona con top y/o left el resultado es que solo se desplazara el mismo elemento .logo1 a partir de su posición natural, sin afectar los otros elementos.

#normal {
  border: 5px solid black;
}

#normal .logo0 {
  width: 100px;
  border: 2px solid yellow
}

#normal .logo1 {
  width: 100px;
  position: relative;
  border: 2px solid red;
  left: 30px;              /*posicionamiento con left y right*/
  top: 10px;
}

#normal .logo2 {
  width: 100px;
  border: 2px solid blue;
}
<div id="normal">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>

Cuando usa position:absolute y lo posiciona con top y/o left el resultado es que solo se desplazara el mismo elemento .logo1 a partir de la esquina superior izquierda de su contenedor #normal, sin tener en cuenta los demas elementos de orden natural.

#normal {
  border: 5px solid black;
}

#normal .logo0 {
  width: 100px;
  border: 2px solid yellow
}

#normal .logo1 {
  width: 100px;
  position: absolute;
  border: 2px solid red;
  left: 70px;
  top:  50px;
}

#normal .logo2 {
  width: 100px;
  border: 2px solid blue;
}
<div id="normal">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo0">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo1">
  <img src="https://image.freepik.com/iconos-gratis/murcielago-con-las-alas-abiertas-logo-variante_318-46799.jpg" class="logo2">
</div>

3
  • el margen tambien posee la mismas coordenadas que el relativo, asi que cuando deberia optar por cual ?, y en cuanto al absoluto, si no quiero posicionar una imagen sobre otra existe algun otro ejemplo en donde se pueda usar? gracias Commented el 2 dic. 2017 a las 15:03
  • @PatricioMartin Respuesta editada* revise que sucede cuando posiciona un elemento con margin y que pasa cuando lo posiciona con top y left, teniendo eso claro, usted define como y cuando lo debe de usar.
    – Michael
    Commented el 2 dic. 2017 a las 15:35
  • a ok, gracias! cerrare el tema Commented el 2 dic. 2017 a las 15:37

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