CSS Relativna i Apsolutna Pozicija

Svojstvo CSS položaja definiše, kao što i samo ime kaže, kako je element pozicioniran na veb stranici.

Ako ste zainteresovani za čitanje o svojstvima fonta, članci o relativnoj veličini fonta i CSS kolonama mogli bi biti zanimljivi.

Dakle, postoji nekoliko vrsta pozicioniranja: statičko, relativno, apsolutno, fiksno, lepljivo, početno i nasledno . Pre svega, objasnimo šta sve ove vrste znače.

• Statički - ovo je podrazumevana vrednost, svi elementi su u redu onako kako se pojavljuju u dokumentu.
• Relativno - element je pozicioniran u odnosu na njegov normalan položaj.
• Apsolutno - element je postavljen apsolutno na svoj prvi pozicionirani roditelj.
• Popravljeno - element je pozicioniran vezan za prozor pregledača.
• Lepljiv - element se pozicionira na osnovu korisničkog položaja pomicanja.

Sada kada smo objasnili osnove, govorićemo više o dve najčešće korišćene vrednosti položaja - relativnoj i apsolutnoj .

Šta je relativno pozicioniranje?

Kada postavite položaj u odnosu na element , bez dodavanja bilo kojih drugih atributa pozicioniranja (gore, dole, desno, levo), ništa se neće dogoditi . Kada dodate dodatni položaj osim relativnog, na primer levi: 20px, element će se pomeriti 20px udesno iz svog normalnog položaja. Ovde možete videti da je ovaj element u odnosu na sebe . Kada se element pomeri, to neće uticati na nijedan drugi element na rasporedu.

Postoji nešto što biste trebali imati na umu prilikom postavljanja položaja - u odnosu na element ograničava opseg apsolutno pozicioniranih podređenih elemenata. To znači da bilo koji element koji je podređen ovom elementu može biti apsolutno pozicioniran unutar ovog bloka.

Posle ovog kratkog objašnjenja, treba da ga potkrepimo, pokazujući primer.

U ovom primeru ćete videti kako se relativni pozicionirani element kreće kada se promene njegovi atributi. Prvi element se pomera levo i gore iz svog normalnog položaja, dok drugi element ostaje na istom mestu jer nije promenjen nijedan dodatni atribut pozicioniranja.

HTML

<div id=”first_element”>First element</div>
<div id=”second_element”>Second element</div>

CSS

#first_element {
  position: relative;
  left: 30px;
  top: 70px;

  width: 500px;
  background-color: #fafafa;
  border: solid 3px #ff7347;
  font-size: 24px;
  text-align: center;
}

#second_element {
   position: relative;

   width: 500px;
   background-color: #fafafa;
   border: solid 3px #ff7347;
   font-size: 24px;
   text-align: center;
}

Šta je apsolutno pozicioniranje?

Apsolutno pozicioniranje omogućava vam da svoj element postavite tačno tamo gde želite .

Apsolutno pozicioniranje se vrši u odnosu na prvi relativno (ili apsolutno) pozicionirani roditeljski element . U slučaju da nema pozicioniranog nadređenog elementa, element koji ima poziciju postavljenu na apsolutni pozicioniraće se direktno vezan za HTML element (samu stranicu) .

Važna stvar koju morate imati na umu prilikom korišćenja apsolutnog pozicioniranja je da se osigura da se ne prekomerno koristi , jer u protivnom može dovesti do noćne more održavanja.

Sledeća stvar je, opet, pokazati primer apsolutnog pozicioniranja.

U primeru, roditeljski element ima položaj postavljen na relativan. Sada, kada postavite položaj podređenog elementa na apsolutno, biće izvršeno svako dodatno pozicioniranje u odnosu na nadređeni element . Podređeni element se pomera relativno na vrh nadređenog elementa za 100 piksela i desno od nadređenog elementa za 40 piksela.

HTML

<div id=”parent”>
  <div id=”child”></div>
</div>

CSS

#parent {
  position: relative;
  
  width: 500px; 
  height: 400px;
  background-color: #fafafa;
  border: solid 3px #9e70ba;
  font-size: 24px;
  text-align: center;
}

#child {
  position: absolute;
  right: 40px;
  top: 100px;

  width: 200px;
  height: 200px;
  background-color: #fafafa;
  border: solid 3px #78e382;
  font-size: 24px;
  text-align: center;
}

Kroz ove primere videli ste razlike između apsolutnih i relativnih pozicioniranih elemenata.

Nadamo se da je ovaj članak razjasnio neke nedoumice vezane za apsolutno i relativno pozicioniranje i da će pomoći u svim budućim projektima.

Pogledajte druge detaljne članke u vezi sa svojstvima CSS-a kao što je ovaj: CSS pozicije , SASS and LESS Nesting .

Ako vam se svidelo, obavezno se pretplatite na naš bilten - ima još članaka!