Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

CSS: Własność position

wtorek,

CSS: Własność position

Właściwość position w CSS jest używana do określenia sposobu, w jaki element jest umieszczany na stronie. Pozwala ona na precyzyjną kontrolę nad położeniem elementów i może przyjmować różne wartości, które mają swoje specyficzne zastosowania i są użyteczne w rozmaitych scenariuszach projektowania stron internetowych. Dobór odpowiedniej wartości position zależy od konkretnych potrzeb układu i interakcji elementów na stronie.

Wartości, jakie może przyjmować position

static

  • Jest to domyślna wartość. Elementy są pozycjonowane według normalnego przepływu dokumentu. Właściwości top, right, bottom, left i z-index nie mają wpływu na elementy z position: static;.
  • Przykład: position: static;

relative

  • Element jest pozycjonowany względem jego normalnego położenia. Możesz używać top, right, bottom, left do przesunięcia elementu od tego punktu. Inne elementy w układzie nie dostosowują się do przesunięcia.
  • Przykład: position: relative; top: 10px; left: 20px;

absolute

  • Element jest pozycjonowany względem najbliższego pozycjonowanego (tj. inaczej niż static) elementu nadrzędnego. Jeśli takiego nie ma, jest pozycjonowany względem początkowego kontenera formatującego. Element jest usuwany z normalnego przepływu dokumentu, co oznacza, że nie wpływa na położenie innych elementów.
  • Przykład: position: absolute; top: 0; right: 0;

fixed

  • Element jest pozycjonowany względem okna przeglądarki. Pozostaje on w tym samym miejscu, nawet podczas przewijania strony. Tak jak w absolute, element jest usuwany z normalnego przepływu dokumentu.
  • Przykład: position: fixed; bottom: 0; left: 0;

sticky

  • Jest to mieszanka pozycjonowania relative i fixed. Element jest traktowany jako relative, dopóki jego położenie w oknie przeglądarki nie osiągnie określonej pozycji, w której zaczyna zachowywać się jak fixed. Jest to przydatne na przykład dla nagłówków tabeli lub menu nawigacyjnego.
  • Przykład: position: sticky; top: 0;

inherit / initial / unset

  • Pozwalają na dziedziczenie wartości z elementu rodzica (inherit), ustawienie na wartość domyślną (initial) lub zresetowanie wartości (unset).

Demonstracja efektu różnych wartości position

W demonstracji wewnątrz kontenera z własnością position ustawioną na relative znajdują się dwa elementy – „Box” oraz akapit z tekstem. Za pomocą poniższych przycisków można zmieniać ustawienie własności position elementu „Box”. W przypadku wartości sticky, aby zobaczyć efekt, należy przewinąć zawartość kontenera.

Box

tekst…
tekst…
tekst…
tekst…
tekst…
tekst…
tekst…
tekst…
tekst…
tekst…

Artykuł: Pierwszy dzień w Splicie

Pierwszy dzień w Splicie

Artykuł: OpenSolaris

OpenSolaris

Artykuł: Bob Frankston

Bob Frankston

Artykuł: Staże w Chorwacji

Staże w Chorwacji

Artykuł: 3Com

3Com

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły