Przejdź do treści

Pozycja ustalona {position: fixed}

Jak ustawić element, aby nie przesuwał się podczas przewijania strony?

selektor { position: fixed; parametry }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:
  • left: wartość - odległość od lewej krawędzi okna
  • top: wartość - odległość od górnej krawędzi okna
  • right: wartość - odległość od prawej krawędzi okna
  • bottom: wartość - odległość od dolnej krawędzi okna
Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Podanie auto oznacza położenie automatyczne. Można oczywiście łączyć parametry, np. left: 1cm; top: -10px.

Polecenie to działa podobnie jak pozycjonowanie absolutne, z tą różnicą, że pozycja elementu jest zawsze obliczana względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło.

Przykład {position: fixed}

Przykład

Przeglądarki


Chrome

Firefox

Edge

Opera

Safari
Poziom wsparcia
min. 2,5 roku
position: fixed1
2008-12-11
1
2004-11-09
12
2015-07-29
4
2000-06-28
1
2003-06-23
 100%

Komentarze #

  • z3c43r
    z3c43r

    20.03.2022 17:45
    Dzięki :lol:
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    08.05.2021 22:45
    To pytanie raczej nie ma wiele związku z pozycjonowaniem CSS ;-) W związku z tym proponuję go zadać we właściwym dziale na forum.
    Zobacz więcej

  • Gość
    Gość

    08.05.2021 20:43
    Mogę mieć jeszcze jedno pytanie? Skąd wziąć rysunek tej wtyczki facebooka i jak dodać, żeby na stronie uaktualniało się ile osób lubi profil?
    Zobacz więcej

  • Gość
    Gość

    03.05.2021 17:49
    Dziękuję bardzo :) Udało mi się wszystko zrobić
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    27.04.2021 16:43
    Jeżeli menu z linkami ma być ponad, a nie po lewej stronie treści - tak jak to było w oryginale w tym szablonie - to w arkuszu stylów trzeba usunąć styl "float: left" dla elementów #MENU i #TRESC.
    Zobacz więcej

  • Gość
    Gość

    27.04.2021 16:19
    Dziękuję bardzo. Działa :D Jak fajnie, że są ludzie, którzy bezinteresownie pomagają. Jeszcze mam ostatnie pytanie. Jak zrobić, żeby w zakładce kontakt dane teleadresowe były po środku? Center nic nie daje.
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    26.04.2021 19:48
    Nie jestem pewny, o które zdjęcia "przy tabelce, a nie nad nią" chodzi. Ale zakładam, że miało być coś takiego: [...] Natomiast jeśli zdjęcia mają być z prawej strony jedno pod drugim, można to zrobić np. tak...
    Zobacz więcej

  • Gość
    Gość

    26.04.2021 19:34
    Nie chciałam kryptoreklamy tu robić ze stroną firmową, ale jak można adres wstawić:
    www.niemieckiewiertla.pl
    To chodzi o te zdjęcia przy tabelce, a nie nad nią
    Zobacz więcej

  • Sławomir Kokłowski
    Sławomir Kokłowski

    25.04.2021 16:56
    Podaj link do strony. Być może wtedy ktoś będzie w stanie Ci pomóc.
    @amongs: Spróbuj ująć widżet social medów w dodatkowy element <div style="float: right">...</div>. Dopilnuj przy tym, aby znajdował się on na samym początku stopki albo ewentualnie bezpośrednio przed nią...
    Zobacz więcej

  • Gość
    Gość

    25.04.2021 15:59
    A co z moją tabelką? Post z 21.04. Pomoże ktoś?
    Zobacz więcej

Zobacz więcej komentarzy

Facebook