I can not see the difference of absolute and relative positions and when should I use them? :( [duplicate]

Question

I can not see the difference of absolute and relative positions and when should I use them? :( [duplicate]

Navigation

#1 by (1 votes)

0

I know that the absolute and relative position have a difference that the absolute edit the flow of the page and that should be used within a relational usually, but when should we use them? in this code I can not see the difference of using it or not, and the relative without the absolute should replace the margin for positioning? link thanks

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>

html css

asked by Patricio Martin 02.12.2017 в 15:27

source

1 answer

Save file and path? [closed] Show colors of an array in JavaFx

score 1 · Accepted Answer

To define when to use position:absolute and when position:relative :

When we want the element NOT to depend on the natural flow of the other elements we use absolute and it is positioned with coordinates top and left . always start in the upper left corner of your container.

For elements with a relativo position, the origin of their coordinates is not the upper left corner of the container element, but the position they would naturally occupy, not conditioned or positioned with top or left .

EXAMPLES:

When you use position:relative and position it with margin the result is that it will affect the elements of natural order, note that with the% margin .logo1 not only moves the same, but also moves to the next element .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>

When you use position:relative and position it with top and / or left the result is that only the same element .logo1 will be displaced from its natural position, without affecting the other elements.

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

When you use position:absolute and position it with top and / or left the result is that only the same element .logo1 will move from the upper left corner of your container #normal , without having account for other elements of natural order.

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