CSS Layout - position Property

position Het kenmerk bepaalt het type van de locatiemethode van het element (static, relative, fixed, absolute of sticky).

position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

  • static
  • relatief
  • vastgezet
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

position: static;

HTML 元素默认情况下的定位方式为 static（静态）。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位：

这个 <div> 元素设置了 position: static;

这是所用的 CSS：

voorbeeld

div.static {
  position: static;
  rand: 3px vastgesteld #73AD21;
}

probeer het zelf

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

这个 <div> 元素设置了 position: relative;

这是所用的 CSS：

voorbeeld

div.relative {
  position: relative;
  left: 30px;
  rand: 3px vastgesteld #73AD21;
}

probeer het zelf

position: fixed;

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS：

voorbeeld

div.fixed {
  position: fixed;
  bottom: 0;
  rechts: 0;
  width: 300px;
  rand: 3px vastgesteld #73AD21;
}

probeer het zelf

这个 <div> 元素设置了 position: fixed;

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

opmerking:“被定位的”元素是其位置除 static 以外的任何元素。

这是一个简单的例子：

这个 <div> 元素设置了 position: relative;
这个 <div> 元素设置了 position: absolute;

这是所用的 CSS：

voorbeeld

div.relative {
  position: relative;
  width: 400px;
  hoogte: 200px;
  rand: 3px vastgesteld #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  rechts: 0;
  breedte: 200px;
  hoogte: 100px;
  rand: 3px vastgesteld #73AD21;
}

probeer het zelf

position: sticky;

position: sticky; elementen worden geplaatst op basis van de scrollpositie van de gebruiker.

stikstof elementen volgens de scrollpositie in relatieve (relatief) en geplakt (vastgezet) tussen wisselen. Eerst wordt het relatief gepositioneerd, totdat het gegeven offsetpositie in het viewport wordt bereikt - dan wordt het 'geplakt' op de juiste positie (bijvoorbeeld position:fixed).

opmerking:Internet Explorer, Edge 15 en oudere versies ondersteunen sticky positioning niet. Safari vereist de -webkit- voorvoegsel (zie het voorbeeld hieronder). U moet ten minste ook ten minste top,right,bottom of left één van hen, zodat de sticky positioning werkt.

In dit voorbeeld blijft de sticky element op de bovenkant van de pagina hangen wanneer het scrollpositie bereikt wordt (top: 0)

voorbeeld

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  achtergrondkleur: groen;
  rand: 2px vastgesteld #4CAF50;
}

probeer het zelf

overlappende elementen

bij het positioneren van elementen kunnen deze overlappen met andere elementen.

z-index de eigenschap specificeert de stapelvolgorde van het element (welk element voor of achter andere elementen moet worden geplaatst).

Elementen kunnen een positieve of negatieve stapelvolgorde instellen:

Dit is een titel

vanwege de z-index van de afbeelding van -1, ligt deze achter de tekst.

voorbeeld

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

probeer het zelf

Elementen met een hogere stapelvolgorde liggen altijd voor elementen met een lagere stapelvolgorde.

opmerking:als twee geplaatste elementen overlappen en niet zijn gespecificeerd z-indexdan wordt het laatste element in de HTML-code weergegeven aan de top.

lokalisatie van tekst in een afbeelding

Hoe tekst op een afbeelding te plaatsen:

voorbeeld

CodeW3C.com Logo
Onderlinks
Bovenlinks
Bovenrechts
Onderrechts
Centraal

Probeer het zelf:

Bovenlinks Bovenrechts Onderlinks Onderrechts Centraal

meer voorbeelden

zet de vorm van het element in
Dit voorbeeld toont hoe je de vorm van een element instelt. Het element wordt in deze vorm gesneden en weergegeven.

alle CSS定位-eigenschappen

eigenschap beschrijving
bottom zet de onderste rand van de marginkant van de定位框.
clip Cnij de elementen met absolute positionering.
left Stel de linker buitenrand van het positioneerbalkje in.
position Definieer het positioneringstype van het element.
right Stel de rechter buitenrand van het positioneerbalkje in.
top Stel de bovenste buitenrand van het positioneerbalkje in.
z-index Stel de stapelingvolgorde van het element in.

Verder lezen

Extra boeken:CSS positionsoverzicht

Extra boeken:CSS relatieve positionering

Extra boeken:CSS absolute positionering