Absolute posisionering van elemente in CSS

In hierdie les sal ons absolute posisionering van elemente ontleed. Dit laat toe om elemente volgens gespesifiseerde koördinate van die bladsy te plaas. Byvoorbeeld, jy kan 'n element in 'n posisie van 100px van bo af van die bladsy en 200px van links plaas. Die element sal daarheen beweeg, ongeag wat ander elemente daar is en sal eenvoudig bo-op hulle kom te staan. Daar word gesê dat die element dan uit die normale vloei van die dokument val: alle ander elemente sal optree asof ons element nie daar is nie.

Om 'n element absoluut te posisioneer, moet die element die eienskap position met die waarde absolute toegeken word. Benewens hierdie eienskap, is daar nog twee nodig: een sal die koördinaat vir die vertikale rigting aandui, en die tweede - vir die horisontale.

Vir die vertikale rigting moet 'n spasie van bo af, of van onder af, ingestel word. Spasie van bo af word deur die eienskap top aangedui, en spasie van onder af - deur die eienskap bottom. Vir die horisontale rigting moet 'n spasie van links, of van regs, ingestel word. Spasie van links word deur die eienskap left aangedui, en spasie van regs - deur die eienskap right.

Kom ons kyk na voorbeelde.

Voorbeeld

Laat ons eers eenvoudig twee blokke maak sonder posisionering (let op dat die elemente nie teen die rand van die venster gedruk is nie, aangesien body standaard margin het):

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

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

Результат:

Voorbeeld

Laat ons nou vir die groen blok absolute posisionering gee, deur dit in die posisie te plaas van bo af 150px en van links 100px:

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

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

Результат:

Voorbeeld

Laat ons nou die groen blok in die posisie plaas 0px van bo af en 0px van links:

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

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

Результат:

Voorbeeld

Laat ons nou die groen blok in die posisie plaas 0px van bo af en 0px van regs:

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

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

Результат:

Voorbeeld

Laat ons nou die groen blok in die posisie plaas 0px van onder af en 0px van regs:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  right: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Voorbeeld

Laat ons nou die groen blok in die posisie plaas 0px van onder af en 0px van links:

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

css#elem1 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
#elem2 {
  position: absolute;
  bottom: 0;
  left: 0;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Praktiese take