Egenskapen position

Egenskapen position angir metoden for posisjonering av elementer. Denne egenskapen blir oftest brukt sammen med egenskapene top, right, bottom, left, som setter innrykk over, til høyre, under, til venstre henholdsvis.

Syntaks

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

Verdier for position

Verdi	Beskrivelse
`absolute`	Absolutt posisjonering. Elementet fjernes fra den normale flyten i dokumentet og posisjoneres i forhold til nærmeste posisjonerte forfedre (hvis tilstede) eller i forhold til nettleservinduet.
`relative`	Relativ posisjonering. Elementet forskyves i forhold til sin normale posisjon i dokumentflyten, men plassen som den opptok, forblir reservert.
`fixed`	Fiksert posisjonering. Elementet fjernes fra den normale flyten i dokumentet og posisjoneres i forhold til nettleservinduet. Forblir på plass under scrolling av siden.
`static`	Statisk posisjonering. Verdien betyr fravær av posisjonering og elementet oppfører seg som normalt.
`sticky`	Klistrende posisjonering. Elementet oppfører seg som `relative`, inntil det når en gitt posisjon under scrolling, hvoretter det klistrer fast til det angitte stedet (som `fixed`).

Standardverdi: static.

Eksempel . Absolutt posisjonering

La oss plassere et element i øvre venstre hjørne av skjermen med små innrykk:

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

Eksempel . Absolutt posisjonering

Og nå plasserer vi et element i øvre høyre hjørne av skjermen med små innrykk:

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

Eksempel . Fiksert posisjonering

Med fiksert posisjonering vil elementet forbli på plass under scrolling:

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

Eksempel . Relativ posisjonering

Ved relativ posisjonering forskyves elementet i forhold til sin normale posisjon, men andre elementer oppfører seg som om elementet ikke ble forskjøvet:

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

Eksempel . Innkapsling

Hvis forelderen har egenskapen position satt til verdien relative, vil absolutt posisjonerte elementer blitt posisjonert i forhold til forelderen:

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

Eksempel . Innkapsling

Hvis forelderen har egenskapen position satt til verdien absolute, vil absolutt posisjonerte elementer blitt posisjonert i forhold til forelderen:

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

Eksempel . Klistrende posisjonering

Hvis for et element egenskapen position har verdien sticky, så oppfører elementet seg som relative, inntil det når en gitt posisjon under scrolling, hvoretter det klistrer fast til stedet. La oss lage en klistrende header:

<h1>Main Site Header</h1>

<div class="header">header header header</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;
}

Eksempel . Uten posisjon

Hvis et element gis absolutt posisjonering uten å spesifisere posisjon, vil elementet forbli stående på det stedet, hvor det sto uten posisjonering, men andre elementer vil slutte å legge merke til det:

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

Eksempel . En akse

Med absolutt posisjonering kan man sette posisjon kun langs en akse. For eksempel, hvis vi setter egenskapen top, vil elementet vertikalt innta den ønskede posisjonen, mens det horisontalt forblir stående, der det sto:

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

Eksempel . Alle posisjoner

Med absolutt posisjonering kan man sette posisjoner fra alle sider, uten å sette bredde og høyde. I dette tilfellet vil elementet plasseres i sentrum av forelderblokken:

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

Se også

egenskapen z-index,
som angir overlapping av elementer