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>
Patricio Martin
  • 47
  • 5
  • buenas amigo estamos en el **stackoverflow** en español por favor modifica la pregunta a español . – Luis Daniel Rovira Contreras Dec 02 '17 at 14:29
  • perdon ahora lo modifico xd – Patricio Martin Dec 02 '17 at 14:30
  • @FranciscoRomero ya se la diferencia :( – Patricio Martin Dec 02 '17 at 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`. – Francisco Romero Dec 02 '17 at 14:36
  • osea que se hereda automaticamente el posicionamiento absoluto si tiene un padre como relativo ?? – Patricio Martin Dec 02 '17 at 14:39
  • @PatricioMartin No, pero al realizar `.logo img` estás seleccionando todas las imágenes que están contenidas dentro del div con clase `.logo` y, como no sobrescribes la propiedad `position` en tu regla de CSS para `img.logo2`, obtiene la propiedad `position` de `.logo img`. Espero haberme explicado bien esta vez. – Francisco Romero Dec 02 '17 at 14:47
  • ooo es verdad, lo pase por alto, y en cuanto cuando deberia usarr posicones o margenes? (Gracias ! ;D) – Patricio Martin Dec 02 '17 at 14:48
  • @PatricioMartin Los márgenes se deben usar solo para guardar un espacio entre ese elemento y el resto de elementos a su alrededor. Las posiciones se deben de usar para posicionar un elemento de la página respecto a otro. Sin embargo, te recomiendo leerte la respuesta de la pregunta que te he enlazado como "Posible duplicado", ya que allí te explico detalladamente el uso de cada uno de los tipos de posiciones que hay. – Francisco Romero Dec 02 '17 at 15:04
  • es que soilo estan las posiciones ahi, pero no respecto a los margenes, por ejemplo, deberia usar un margen para posicionar pero si quiero poner una imagen al lado de esta en la cual antes tenia un margen deberia usar posicion para que no ocupe espacio verdad? – Patricio Martin Dec 02 '17 at 15:11

1 Answers1

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>
Michael
  • 793
  • 4
  • 11
  • 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 – Patricio Martin Dec 02 '17 at 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 Dec 02 '17 at 15:35
  • a ok, gracias! cerrare el tema – Patricio Martin Dec 02 '17 at 15:37