Gdzie zostanę umieszczony?

Gdzie zostanę umieszczony?

Z artykułu dowiesz się o podstawowych technikach i pojęciach związanych z umiejscawianiem elementów na stronie.

 

Tworząc strony nie raz zetkniesz się z koniecznością umiejscowienia elementów aby były „na swoim miejscu”. Jest kilka podstawowych schematów pozycjonowania, które absolutnie musisz znać jeżeli chcesz tworzyć witryny na poważnie. Jednak zanim do nich przejdziemy, dwa słowa wstępu jak domyślnie przeglądarki rozmieszczają elementy.

Każdy element HTML posiada domyślny sposób rozmieszczania, zależny od typu elementu. Dla większości elementów będzie to rozmieszczenie blokowe (block) lub śródliniowe (inline).

Elementy blokowe i śródliniowe a pozycjonowanie

Elementy blokowe rozpoczynają się w nowym wierszu i najczęściej tworzą szkielet, strukturę strony. Idealnym przykładem elementu blokowego jest znacznik <div>, który jest wykorzystywany do wydzielenia odpowiednich sekcji na stronie. Znaczniki nagłówków <h1> – <h6>, akapitów <p>, czy list <ul>, <li> to również elementy blokowe. Przeciwieństwem elementów blokowych są elementy śródliniowe, które są rozmieszczane obok otaczających je elementów. Tutaj również możemy podać idealny przykład takiego znacznika, którym jest <span>. Jest on bardzo często wykorzystywany aby wyróżnić pewien fragment tekstu przykładowo w akapicie. Otaczając część takiego paragrafu znacznikiem <span> i nadając mu klasę można przykładowo określić kolor tylko dla konkretnego słowa w akapicie. Innymi często występującymi elementami inline są znaczniki pogrubienia <b>, <strong>, pochylenia <i> czy zdjęcia <img>.

W poniższym przykładzie możesz zobaczyć, domyślne zachowanie dla elementów blokowych i śródliniowych.

See the Pen block inline by Tomasz Wikło (@studioleopard) on CodePen.19725

Jednak co w przypadku, gdy powyższe zachowania nie spełniają naszego oczekiwania? Wtedy do zabawy wkracza CSS z właściwością property! Dzięki właściwości property możemy określić jeden z czterech schematów pozycjonowania: static, relative, absolute i fixed.

Cztery schematy pozycjonowania

1. static, czyli układ normalny

Elementy blokowe w układzie normalnym nawet jak nie zajmują pełnej szerokości, są umieszczane w nowym wierszu, jeden pod drugim. Jest to domyślne zachowanie przeglądarki. Nie trzeba go deklarować, chociaż można to zrobić dodając position: static.

2. relative, czyli układ względny

Element w układzie względnym można przesunąć za pomocą właściwości left, right, top, bottom względem miejsca, w którym zostałby umieszczony przy użyciu rozkładu normalnego.

Dla przykładu, nadając klasę .happy znacznikowi <span>, ustawiając position: relative, left: 5px, bottom: 15px można zmienić domyślne położenie o kilka pikseli względem domyślnego położenia.

See the Pen position relative by Tomasz Wikło (@studioleopard) on http://codepen.io‘>CodePen.19725

3. absolute, czyli układ bezwzględny

Elementy w układzie bezwzględnym są tak jakby wyciągane z domyślnego układu, przestają mieć wpływ na elementy otaczające. Mówiąc konkretniej, przeglądarka traktuje elementy w układzie bezwzględnym tak, jakby w ogóle ich tam nie było.

W układzie bezwzględnym elementy są pozycjonowane względem najbliższego elementu pozycjonowanego relatywnie. W poniższym przykładzie, akapit w układzie normalnym znalazłby się wewnątrz div wewnętrznego, jednak został wyciągnięty poza układ. Dodatkowo ze względu na to, że div wewnętrzny pozycjonowany jest w układzie normalnym a dopiero zewnętrzy w układzie relatywnym, to akapit jest pozycjonowany względem zewnętrznego a nie wewnętrznego elementu div.

See the Pen position absolute by Tomasz Wikło (@studioleopard) on http://codepen.io‘>CodePen.19725

4. fixed, czyli układ ustalony

W układzie ustalonym elementy pozycjonowane są względem okna przeglądarki. Jest to odmiana pozycjonowania absolutnego. Podczas przewijania strony, element pozostaje cały czas w stałym, ustalonym miejscu.

See the Pen position fixed by Tomasz Wikło (@studioleopard) on CodePen.19725

To są cztery podstawowe sposoby umiejscawiania elementów na stronie. Podziel się swoimi uwagami w komentarzu.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.