Ostatnio edytowany:

position

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości position

przeznaczenie

element HTML każdego typu

dziedziczenie

nie

wartość initial

static

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości position

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

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

Edge

tak

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

static

Opis

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

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:#CBFFFF;
      }

      #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
    </div>

  </body>
</html>

relative

Opis

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
  • element HTML posiadający pozycję relative nie wpływa swoim rozmiarem na rozmiar lub ułożenie innych 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
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ę "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:#CBFFFF;
      }

      #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
    </div>

  </body>
</html>

absolute

Opis

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 nie posiada wspomnianego elementu przodka, wtedy 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 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
  • element HTML posiadający pozycję absolute nie wpływa swoim rozmiarem na rozmiar lub ułożenie innych 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
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ę "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:#CBFFFF;
      }

      #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
    </div>

  </body>
</html>

fixed

Opis

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
  • element HTML posiadający pozycję fixed nie wpływa swoim rozmiarem na rozmiar lub ułożenie innych 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:#CBFFFF;
      }

      #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
    </div>

  </body>
</html>