Relatīvā elementu pozicionēšana CSS

Relatīvā pozicionēšana tiek iestatīta ar vērtību relative īpašībai position. Šāda pozicionēšana ļauj pārvietot elementus attiecībā pret to pašreizējo novietojumu par noteiktu attālumu. Tajā pašā laikā visi pārējie lapas elementi redzēs, ka elements atrodas tur, kur tas sākotnēji atradās. Tas ir, ar šāda veida pozicionēšanu elements neizkrīt no normālā plūsmas konteksta.

Nobīdes no pašreizējā stāvokļa tiek noteiktas ar īpašībām top, right, bottom un left.

Piemērs

Vispirms izveidosim divus blokus bez pozicionēšanas:

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;
}

Результат:

Piemērs

Tagad pievienosim pirmajam blokam relative. Pagaidām nekas nemainīsies, jo mēs neesam norādījuši bloka nobīdi:

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;
}

Результат:

Piemērs

Tagad pārvietosim mūsu bloku par 30px no augšas, norādot tam īpašību top. Tajā pašā laikā visi pārējie elementi uzvedīsies tā, it kā mūsu bloks joprojām atrastos sākotnējā vietā:

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;
}

Результат:

Piemērs

Tagad arī pārvietosim mūsu bloku par 40px no kreisās puses, norādot tam īpašību left:

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;
}

Результат:

Piemērs

Negatīvas īpašību top, right, bottom un left vērtības pārvieto pretējā virzienā. Piemēram, pozitīva vērtība top pārvieto uz leju, bet negatīva - uz augšu.

Pārvietosim mūsu otro bloku par 40px uz augšu, norādot tam negatīvu vērtību īpašībai top:

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;
}

Результат:

Praktiskie uzdevumi

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;
}