Die position eienskap

Die eienskap position spesifiseer die metode om elemente te posisioneer. Hierdie eienskap word meestal saam gebruik met die eienskappe top, right, bottom, left, wat die spasie bo, regs, onder en links onderskeidelik stel.

Sintaksis

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Waardes vir position

Waarde	Beskrywing
`absolute`	Absolute posisionering. Die element word uit die normale dokumentvloei verwyder en geposisioneer relatief tot die naaste geposisioneerde voorganger (indien aanwesig) of relatief tot die blaaier venster.
`relative`	Relatiewe posisionering. Die element word verskuif relatief tot sy normale posisie in die dokumentvloei, maar die spasie wat dit beslaan het, bly gereserveer.
`fixed`	Vaste posisionering. Die element word uit die normale dokumentvloei verwyder en geposisioneer relatief tot die blaaier venster. Dit bly in plek wanneer die bladsy geskuif word.
`static`	Statiese posisionering. Hierdie waarde beteken geen posisionering nie en die element tree op soos gewoonlik.
`sticky`	Klewerige posisionering. Die element tree op soos `relative`, totdat dit 'n gespesifiseerde posisie bereik tydens skuif, waarna dit vasplak aan die gespesifiseerde plek (soos `fixed`).

Standaard waarde: static.

Voorbeeld . Absolute posisionering

Kom ons plaas 'n element in die boonste linkerhoek van die skerm met klein spasies:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Voorbeeld . Absolute posisionering

En nou plaas ons 'n element in die boonste regterhoek van die skerm met klein spasies:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Voorbeeld . Vaste posisionering

Met vaste posisionering sal die element in plek bly wanneer geskuif word:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Voorbeeld . Relatiewe posisionering

Met relatiewe posisionering word die element verskuif relatief tot sy normale posisie, maar ander elemente tree op asof die element nie verskuif is nie:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Voorbeeld . Nesting

As die ouer se position eienskap die waarde relative het, dan sal absoluut geposisioneerde elemente relatief tot die ouer geposisioneer word:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Voorbeeld . Nesting

As die ouer se position eienskap die waarde absolute het, dan sal absoluut geposisioneerde elemente relatief tot die ouer geposisioneer word:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Voorbeeld . Klewerige posisionering

As 'n element se position eienskap die waarde sticky het, tree die element op soos relative, totdat dit 'n gespesifiseerde posisie bereik tydens skuif, waarna dit vasplak. Kom ons maak 'n klewerige kop:

<h1>Hoof Werf Kop</h1>

<div class="header">kop kop kop</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Voorbeeld . Sonder posisie

As 'n element absolute posisionering gekry het sonder om 'n posisie te spesifiseer, sal die element in dieselfde plek bly waar dit was sonder posisionering, maar ander elemente sal dit nie meer raaksien nie:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Voorbeeld . Een as

Met absolute posisionering kan jy die posisie slegs op een as spesifiseer. Byvoorbeeld, as ons die top eienskap spesifiseer, sal die element vertikaal in die verlangde posisie geplaas word, en horisontaal sal dit bly staan waar dit gestaan het:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Voorbeeld . Alle posisies

Met absolute posisionering kan jy posisies van alle kante spesifiseer, sonder om breedte en hoogte te gee. In hierdie geval sal die element in die middel van die ouerblok wees:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Sien ook

die eienskap z-index,
wat die oorvleueling van elemente spesifiseer