Pozycjonowanie CSS od dawna stanowi ważną część tworzenia layoutów stron. Nawet przy zastosowaniu technik układania CSS, takich jak Flexbox i CSS Grid, pozycjonowanie wciąż ma ważne miejsce w każdym worku projektanta stron internetowych.
Podczas korzystania z pozycjonowania CSS, pierwszą rzeczą, którą musisz zrobić, to ustalić właściwość CSS dla pozycji, aby poinformować przeglądarkę, czy zamierzasz używać bezwzględnego lub względnego pozycjonowania dla danego elementu. Musisz także zrozumieć różnicę między tymi dwiema właściwościami pozycjonowania.
Podczas gdy bezwzględne i względne są dwie właściwości pozycji CSS najczęściej używane w projektowaniu stron internetowych, w rzeczywistości właściwość position ma cztery stany:
- statyczny
- absolutny
- krewny
- naprawiony
Pozycjonowanie statyczne
Statyczna jest domyślną pozycją dla dowolnego elementu na stronie internetowej. Jeśli nie zdefiniujesz pozycji elementu, jest ona statyczna, co oznacza, że jest wyświetlana na ekranie w zależności od tego, gdzie jest w dokumencie HTML i jak jest wyświetlana w normalnym przepływie tego dokumentu.
Jeśli zastosujesz reguły pozycjonowania, takie jak Top lub lewo do elementu, który ma pozycję statyczną, reguły te są ignorowane, a element pozostaje tam, gdzie pojawia się w normalnym obiegu dokumentów. Rzadko, jeśli w ogóle, musisz ustawić element w statycznej pozycji w CSS, ponieważ jest to wartość domyślna.
Absolute CSS Positioning
Bezwzględne pozycjonowanie jest prawdopodobnie najłatwiejszą pozycją CSS do zrozumienia. Zaczynasz od tej właściwości pozycji CSS:
pozycja: absolutna;
Ta wartość informuje przeglądarkę, że cokolwiek zostanie umieszczone, powinno zostać usunięte z normalnego przepływu dokumentu i umieszczone w dokładnym miejscu na stronie. Jest to obliczane na podstawie najbliższego niestatycznie pozycjonowanego przodka tego elementu. Ponieważ absolutnie pozycjonowany element jest usuwany z normalnego przepływu dokumentu, ma wpływ na to, w jaki sposób elementy przed nim lub po nim w kodzie HTML są umieszczone na stronie internetowej. Na przykład, jeśli masz podział, który jest pozycjonowany przy użyciu wartości względnej i wewnątrz tego podziału, masz akapit, który chcesz umieścić 50 pikseli od góry podziału, dodajesz wartość pozycji absolutny do tego akapitu wraz z wartością offsetową 50px na Top właściwość, taka jak ta: pozycja: absolutna;u góry: 50 pikseli;
Ten absolutnie pozycjonowany element zawsze wyświetla 50 pikseli od góry tego względnie umiejscowionego podziału, bez względu na to, co jeszcze wyświetla się w normalnym przepływie. Twój bezwzględnie umieszczony element używa względnie pozycjonowanego jako kontekst, a wartość pozycjonowania, której używasz, jest względna. Cztery właściwości pozycjonowania, które możesz wykorzystać, to: Możesz użyć albo Top lub Dolny - ponieważ element nie może być pozycjonowany według obu tych wartości - i albo dobrze lub lewo. Jeśli element jest ustawiony na pozycję absolutną, ale nie ma żadnych niestatycznie pozycjonowanych przodków, to jest pozycjonowany względem elementu body, który jest elementem najwyższego poziomu strony. Względne pozycjonowanie wykorzystuje te same cztery właściwości pozycjonowania, co pozycjonowanie absolutne, ale zamiast oprzeć położenie elementu na jego najbliższym niestatycznym położeniu przodka, zaczyna się od miejsca, w którym element byłby, gdyby był nadal w normalnym przepływie. Na przykład, jeśli masz trzy akapity na swojej stronie internetowej, a trzecia ma pozycja: względna styl umieszczony na nim, jego pozycja jest przesunięta w stosunku do bieżącej lokalizacji. Ustęp 1. Ustęp 2. Ustęp 3. W powyższym przykładzie akapit trzeci znajduje się w pozycji 2em od lewej strony elementu kontenera, ale wciąż poniżej pierwszych dwóch akapitów. Pozostaje w normalnym przepływie dokumentu i jest nieznacznie przesunięty. Jeśli zmienisz to na pozycja: absolutna, wszystko, co po nim jest wyświetlane, jest wyświetlane na wierzchu, ponieważ nie znajduje się już w normalnym przepływie dokumentu. Elementy na stronie są często używane do ustawiania wartości pozycja: względna bez ustalonej wartości przesunięcia, co oznacza, że element pozostaje dokładnie tam, gdzie pojawiłby się w normalnym przepływie. Odbywa się to wyłącznie w celu ustalenia tego elementu jako kontekstu, względem którego można bezwzględnie pozycjonować inne elementy. Na przykład, jeśli masz podział wokół całej witryny z wartością klasy pojemnik, który jest częstym scenariuszem w projektowaniu stron internetowych, ten podział można ustawić na pozycję krewny aby wszystko, co w nim jest, mogło wykorzystać go jako kontekst pozycjonowania. Naprawiono pozycjonowanie jest bardzo podobne do pozycjonowania absolutnego. Pozycja elementu jest obliczana w taki sam sposób, jak model bezwzględny, ale stałe elementy są następnie ustalane w tym miejscu - prawie jak znak wodny. Cała reszta na stronie przewija się obok tego elementu. Aby użyć tej wartości właściwości, ustaw: position: fixed;
Pamiętaj, że gdy poprawisz element w swojej witrynie, drukuje on w tej lokalizacji, gdy twoja strona internetowa jest drukowana. Jeśli na przykład element jest naprawiony u góry strony, pojawi się u góry każdej drukowanej strony, ponieważ jest on umieszczony na górze strony. Możesz użyć rodzajów mediów, aby zmienić sposób wyświetlania na drukowanych stronach elementów stałych: @media ekran { h1 # first {position: fixed; } } @media wydrukuj { h1 # first {position: static; } }
Względne pozycjonowanie
Co ze stałym pozycjonowaniem?
