Atrybut pozycji stylu

Definicja i użycie

position Ustawienia atrybutów lub zwracanie typu metody lokalizacji elementu (statyczne, względne, absolutne lub stałe).

Inne zasoby:

CSS Kurs:CSS Lokalizacja

CSS Przeglądarka dokumentów:Właściwość position

Przykład

Przykład 1

Zmiana pozycjonowania elementu <div> z względowego na absolutne：

document.getElementById("myDIV").style.position = "absolute";

Spróbuj sam

Przykład 2

Używanie różnych typów pozycjonowania：

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Spróbuj sam

Przykład 3

Zwracana pozycja elementu <h2>：

alert(document.getElementById("myH2").style.position);

Spróbuj sam

Gramatyka

Zwracanie właściwości position：

object.style.position

Ustawienie właściwości position：

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Wartość atrybutu

Wartość Opis
static Elementy są wyświetlane w kolejności ich występowania w strumieniu dokumentu. Domyślnie.
absolute Element jest pozycjonowany względem pierwszego elementu nadrzędnego, który ma pozycjonowanie (nie jest statyczny).
fixed Element jest pozycjonowany względem okna przeglądarki.
relative

Element jest pozycjonowany względem jego normalnej pozycji.

Dlatego "left:20" zwiększa lewą pozycję elementu o 20 pikseli.
sticky

Elementy są pozycjonowane na podstawie pozycji przewijania użytkownika.

Elementy przyległe przełączają się między relative i fixed na podstawie pozycji przewijania.

Jest to pozycjonowanie względne, aż do napotkania podanej pozycji przesunięcia w oknie widoku - następnie "przylega" do odpowiedniej pozycji (np. position:fixed).

Komentarz：Nie obsługuje IE/Edge 15 lub wcześniejszych wersji. Safari od wersji 6.1 obsługuje prefiks Webkit.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz: initial。
inherit Inherbuje tę właściwość od elementu nadrzędnego. Zobacz: inherit。

Szczegóły techniczne

Domyślna wartość： static
Zwracana wartość： ciąg znaków, który reprezentuje typ pozycji elementu.
CSS wersja： CSS2

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie