Autor publikacji: Virtual Patriot - Administrator

position

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - position property (LV3)

Przeznaczenie właściwości `position`

Za pomocą właściwości position możemy określić jakiego typu pozycję powinien posiadać interesujący nas element HTML.

Informacje dodatkowe: element HTML posiadający właściwość transform wraz z wartością różną od wartości none staje się automatycznie elementem HTML posiadającym pozycję relative

Informacje techniczne o właściwości `position`

przeznaczenie: element HTML każdego typu
pozycja: nie dotyczy
dziedziczenie: nie
wartość initial: static
wyjątki initial: brak
animowanie: tak (animacja schodkowa)

Interpretacja właściwości `position`

tak

Interpretuje wartość fixed, lecz od wersji "7".

tak

Opis wartości właściwości `position`

static

Wyjaśnienie

Wartość static jest domyślną wartością właściwości position.

Domyślnie element HTML posiada pozycję typu static (statyczną).

Cechy elementu HTML posiadającego pozycję `static`

element HTML posiadający pozycję static nie może ulec procesowi pozycjonowania za pomocą właściwości top, right, bottom, left

Przykład

  position:static;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#blok

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Przykładowy element "div#blok" posiada pozycję "static".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #blok {
        right:10px;
        top:25px;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

    <div id="blok">
      div#blok
    </div>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

relative

Wyjaśnienie

Za pomocą wartości relative właściwości position możemy sprawić, że interesujący nas element HTML będzie posiadał pozycję typu relative (relatywną).

Cechy elementu HTML posiadającego pozycję `relative`

element HTML posiadający pozycję relative może ulec procesowi pozycjonowania za pomocą właściwości top, right, bottom, left
pozycjonowanie elementu HTML dokonywane jest względem krawędzi tego elementu HTML
podczas procesu pozycjonowania element HTML posiadający pozycję relative nie wpływa swoim rozmiarem na rozmiar lub ułożenie pozostałych elementów HTML, lecz obszar jaki zajmowałby dany element HTML posiadając pozycję static pozostaje na swoim miejscu w oknie przeglądarki internetowej

Przykład

  position:relative;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#blok

Przykładowy element "div#blok" posiada pozycję "relative", ponieważ do wspomnianego elementu "div#blok" została dodana właściwość "position" wraz z wartością "relative".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #blok {
        position:relative;
        right:10px;
        top:25px;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

    <div id="blok">
      div#blok
    </div>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

absolute

Wyjaśnienie

Za pomocą wartości absolute właściwości position możemy sprawić, że interesujący nas element HTML będzie posiadał pozycję typu absolute (absolutną).

Cechy elementu HTML posiadającego pozycję `absolute`

element HTML posiadający pozycję absolute może ulec procesowi pozycjonowania za pomocą właściwości top, right, bottom, left
pozycjonowanie elementu HTML dokonywane jest względem zewnętrznych krawędzi marginesów wewnętrznych najbliższego elementu przodka posiadającego pozycję każdą inną tylko nie static
gdy element HTML jest elementem HTML należącym do siatki elementu HTML tworzącego układ siatki, wtedy pozycjonowanie elementu HTML dokonywane jest względem krawędzi miejsca, do którego został przypisany
w każdym innym przypadku pozycjonowanie elementu HTML dokonywane jest względem krawędzi okna przeglądarki internetowej
gdy element HTML posiadający pozycję absolute posiada jakieś właściwości CSS zależne od jakiegokolwiek rozmiaru szerokości lub rozmiaru wysokości innego elementu HTML, wtedy wspomniane właściwości CSS są zależne od rozmiaru wspomnianego elementu przodka lub od rozmiaru wspomnianego miejsca na siatce elementu HTML tworzącego układ siatki lub od rozmiaru okna przeglądarki internetowej
w pierwszej kolejności to suwaki służące do przewijania treści wspomnianego elementu przodka mogą reagować na element HTML posiadający pozycję absolute, gdy będzie to możliwe oraz konieczne
element HTML posiadający pozycję absolute zazwyczaj zachowuje cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element HTML
podczas procesu pozycjonowania element HTML posiadający pozycję absolute nie wpływa swoim rozmiarem na rozmiar lub ułożenie pozostałych elementów HTML, natomiast obszar jaki zajmowałby dany element HTML posiadając pozycję static zostaje usunięty z okna przeglądarki internetowej

Przykład

  position:absolute;

ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

div#blok

Przykładowy element "div#blok" posiada pozycję "absolute", ponieważ do wspomnianego elementu "div#blok" została dodana właściwość "position" wraz z wartością "absolute".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #przodek-relative {
        position:relative;
        border:5px dashed black;
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #blok {
        position:absolute;
        right:0;
        padding:1em;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div id="przodek-relative">
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
      <div id="blok">div#blok</div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

fixed

Wyjaśnienie

Za pomocą wartości fixed właściwości position możemy sprawić, że interesujący nas element HTML będzie posiadał pozycję typu fixed (ustaloną).

Cechy elementu HTML posiadającego pozycję `fixed`

element HTML posiadający pozycję fixed może ulec procesowi pozycjonowania za pomocą właściwości top, right, bottom, left
pozycjonowanie elementu HTML dokonywane jest względem krawędzi okna przeglądarki internetowej
element HTML posiadający pozycję fixed pozostaje zawsze w tym samym miejscu w oknie przeglądarki internetowej (nawet podczas przewijania okna przeglądarki internetowej)
gdy element HTML posiadający pozycję fixed posiada jakieś właściwości CSS zależne od jakiegokolwiek rozmiaru szerokości lub rozmiaru wysokości innego elementu HTML, wtedy wspomniane właściwości CSS są zależne od rozmiaru okna przeglądarki internetowej
suwaki okna przeglądarki internetowej służące do przewijania treści nie reagują na element HTML posiadający pozycję fixed
element HTML posiadający pozycję fixed zazwyczaj zachowuje cechy podobne do cech elementu HTML typu block, dzięki czemu między innymi wiemy, na jakie właściwości CSS może reagować dany element HTML
podczas procesu pozycjonowania element HTML posiadający pozycję fixed nie wpływa swoim rozmiarem na rozmiar lub ułożenie pozostałych elementów HTML, natomiast obszar jaki zajmowałby dany element HTML posiadając pozycję static zostaje usunięty z okna przeglądarki internetowej

Przykład

  position:fixed;

Zobacz rezultat: przykład wartości fixed właściwości position

Przykładowy element "div#blok" posiada pozycję "fixed", ponieważ do wspomnianego elementu "div#blok" została dodana właściwość "position" wraz z wartością "fixed".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
        min-height:3000px;
        border:6px dashed black;
      }

      div {
        padding:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #blok {
        position:fixed;
        left:0;
        top:0;
        background-color:rgba(255, 0, 0, 0.9);
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

    <div id="blok">
      div#blok
    </div>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>