Relatieve positionering van elementen in CSS

Relatieve positionering wordt ingesteld met de waarde relative voor de eigenschap position. Deze positionering maakt het mogelijk om elementen te verschuiven ten opzichte van hun huidige positie met een opgegeven waarde. Tegelijkertijd zullen alle andere elementen op de pagina denken dat het element nog steeds op de oorspronkelijke plek staat. Dat betekent dat bij dit type positionering het element niet uit de normale stroom wordt gehaald.

Verschuivingen ten opzichte van de huidige positie worden ingesteld met de eigenschappen top, right, bottom en left.

Voorbeeld

Laten we eerst twee blokken maken zonder positionering:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Voorbeeld

Laten we nu relative toevoegen aan het eerste blok. Hierdoor verandert er voorlopig nog niets, omdat we geen verschuiving hebben opgegeven:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Voorbeeld

Laten we ons blok nu 30px van bovenaf verschuiven, door de eigenschap top in te stellen. Hierbij zullen alle andere elementen zich gedragen alsof ons blok nog steeds op de plek staat waar het oorspronkelijk was:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Voorbeeld

Laten we ons blok ook 40px van links verschuiven, door de eigenschap left in te stellen:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Voorbeeld

Negatieve waarden voor de eigenschappen top, right, bottom en left verschuiven in de tegenovergestelde richting. Bijvoorbeeld, een positieve waarde voor top verschuift naar beneden, en een negatieve - naar boven.

Laten we ons tweede blok 40px naar boven verschuiven, door een negatieve waarde voor de eigenschap top in te stellen:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Praktische opdrachten

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}