Co to jest "position: relative"? - Kurs HTML i CSS
Co to jest "position: relative"?
"position: relative
" w CSS oznacza, że element pozostaje w swojej pierwotnej przestrzeni na stronie, ale jego pozycję można dostosować za pomocą właściwości top
, right
, bottom
lub left
. To umożliwia przesunięcie elementu względem jego pierwotnej pozycji.
- Pozycjonowanie / Pozycja relatywna {position: relative}
selektor { position: relative; 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 położenia spoczynkowego top: wartość - odległość od górnej krawędzi położenia spoczynkowego right: wartość - odległość od prawej krawędzi położenia spoczynkowego bottom: wartość - odległość od dolnej krawędzi położenia spoczynkowego Wyraz "wartość" oznacza konkretną odległość (od...
- Pozycjonowanie / Pozycja statyczna {position: static}
selektor { position: static } Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów]. Przywraca normalne pozycjonowanie elementu. Jest to przydatne np. w celu usunięcia ogólnej deklaracji pozycjonowania, umieszczonej w arkuszu stylów. Wystarczy wtedy, dla wybranych elementów strony, umieścić powyższe polecenie w stylu inline. Spowoduje to usunięcie pozycjonowania dla tych elementów, a jednocześnie utrzymanie dla innych (tego samego typu). Przykład {position: static}...
- Pozycjonowanie / Nakładanie {z-index}
Spis treści {z-index} Nakładanie {z-index} Kontekst stosu Nakładanie {z-index} selektor { position: rodzaj; parametry; z-index: numer } Selektorem może znacznik poddany pozycjonowaniu [zobacz: Wstawianie stylów]. Wyrażenie "position: rodzaj; parametry;" określa typ oraz parametry pozycjonowania (absolutne, relatywne lub ustalone). Natomiast jako "numer" należy wpisać pojedynczą liczbę, określającą, kolejność nakładania pozycjonowanych elementów (element z numerem 1 będzie na samym...
- Menu w CSS / Poziome menu
...przycisków. Czcionki Tekst Tło Marginesy Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul { position: absolute; } ul li { float: left; border-width: 0 1px 1px 1px; border-style: solid; border-color: transparent #25b #25b #9ce; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 95px; text-align: center; padding: 5px 0; font-weight: bold; background-color: #27c; color: #def; border-top: 10px solid...
- Szablon strony na DIV-ach / Płynny szablon
...fff; color: #000; margin: 0; padding: 0; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; position: relative; background-color: #ccc; } #TRESC { margin-left: 150px; background-color: #fff; } #STOPKA { clear: both; background-color: #888; } Wyjaśnienie: Ustalamy kolor tła oraz tekstu dla całej strony oraz usuwamy marginesy, aby mieć większy obszar dostępny na nasz szablon. Ustalamy stałą szerokość kolumny menu nawigacyjnego...
- Szablon strony na DIV-ach / Responsywny szablon
...{ background-color: #888; } @media only all and (min-width: 800px) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } #STOPKA { clear: both; } } @media only all and (min-width: 1280px) { html, body { text-align: center; } #top { width: 1260px; margin-left: auto; margin-right: auto; text-align: left; } #MENU { width: 300px; } #TRESC { width: 960px...
- Oprawa graficzna / Zamiennik obrazkowy
...ponieważ użytkownik ich nie widzi, nie wie w co może kliknąć. <div><span></span>Zamiennik obrazkowy</div> div { width: 200px; height: 50px; position: relative; } div span { background-image: url(obrazek.gif); display: block; width: 100%; height: 100%; position: absolute; } Koncepcja tego zamiennika obrazkowego polega na pozostawieniu tekstu bez zmian, a jedynie przykryciu go obrazkiem. Dzięki temu po wyłączeniu grafiki obrazek po prostu zniknie i odkryje tekst. Niestety sposób...
- Komendy CSS3 / Czcionki CSS
...font-style font-synthesis font-variant font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight font Atrybuty mieszane czcionki Wartość [ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar Inicjalizacja zobacz cechy indywidualne Zastosowanie wszystkie elementy...
- Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanego
...Menu('menu0', 'menu0', true, false, 0, 0, -1, -1, true); </script> oraz dołączyć następujący arkusz CSS: #menu0, #menu0 dl { font-size: 12px; position: absolute; width: 150px; margin: 0; padding: 0; border-width: 1px; border-style: solid; border-color: #eee #aaa #aaa #eee; } #menu0 dt { cursor: pointer; margin: 0; padding: 0; background-color: #888; color: #fff; text-align: center; font-weight: bold; font-size: 14px; border-width: 1px; border-style...
- Reguły warunkowe CSS / Zapytania właściwości @supports
...układu, możemy podać alternatywne reguły CSS: @supports not (display: flex) { #MENU { width: 150px; float: left; overflow: hidden; position: relative; } #TRESC { margin-left: 150px; } } Możliwe jest również określanie bardziej skomplikowanych warunków przy użyciu operatorów logicznych and (ang. i) oraz or (ang. lub): @supports (box-shadow: 0 0 10px 0 #000) or (-moz-box-shadow: 0 0 10px 0 #000) or (-webkit-box-shadow: 0 0 10px 0 #000) or (-o-box-shadow: 0 0...