position

Jak działa position?

Element position określa jak dany element ma być pozycjonowany na stronie, jak ma się zachowywać względem innych elementów. Ta właściwość również określa ich finalną pozycję.

Rodzaje pozycjonowania

Element pozycjonowany to element, którego wartość pozycji jest relative, absolute, fixed lub sticky. Element static nie zalicza się do tego zbioru.
Element pozycjonowany sticky to element, którego wartość pozycji jest sticky Jest traktowany jako względnie ustawiony, dopóki jego zawierający blok nie przekroczy określonego progu. Element jest "zablokowany" do momentu spotkania się z przeciwną krawędzią bloku.
Element pozycjonowany relatywnie to element, którego wartość pozycji jest relative. Właściwości top i bottom określają jego pionowe położenie natomiast właściwości right, left określają jego położenie poziome.
Element pozycjonowany absolutnie to element, którego wartość pozycji jest bezwględna lub stała. Właściwości right, left, top i bottom określają odsunięcia od krawędzi bloku zawierającego element. Blok zawierający pozycjonowanie absolutne jest przodkiem względem którego element jest pozycjonowany. Jeśli element ma marginesy to są one dodawane do przesunięcia.

Składnia

Do elementu position dobiera się jedną wartość, która jest słowem kluczowym.

Wartości

static: Element jest ustawiony zgodnie z przepływem dokumentu. Wartości top, right, bottom, left nie mają na niego wpływu. static jest wartością domyślną.
relative: Element jest pozycjonowany zgodnie z normalnym przepływem dokumentu, a następnie przesunięty względem siebie w oparciu o top, right, bottom, left. Przesunięcie nie wpływa na pozycję żadnych innych elementów
absolute: Element jest usuwany z normalnego przepływu dokumentu i nie ma miejsca dla niego w układzie strony. Jest ustawiony względem najbliższego przodka. Jeśli taki nie istnieje to zostaje umieszczonny względem początkowego bloku. Jego ostateczna pozycja zależy od wartości top, right, bottom, left.
fixed: Element jest usuwany z normalnego przepływu dokumentu i nie ma miejsca dla elementu w układzie strony. Jest pozycjonowany względem początkowego bloku. Pozostaje w jednym miejscu podczas scrollowania. Jego ostateczna pozycja zależy od wartości top, right, bottom, left.
sticky: Element jest pozycjonowany zgodnie z normalnym obiegiem dokumentu, a następnie przesunięty względem najbliższego przewijanego przodka. Przesunięcie nie wpływa na pozycję żadnych innych elementów. Element sticky „przykleja się” do najbliższego przodka, który ma „mechanizm scrollowania”.

Zapis elementu

Przykłady

Static

Wartość static jest domyślna.

HTML

            
    <div class="kartonik" id="jeden">Jeden</div>
   
    <div class="kartonik" id="dwa">Dwa</div>

    <div class="kartonik" id="trzy">Trzy</div>
  
    <div class="kartonik" id="cztery">Cztery</div>

CSS

            
            .kartonik 
    {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            color: white;
    }


            #dwa 
    {
            position: static;
            background: green;
            color: white;
    }

Jeden

Dwa

Trzy

Cztery

Relative

Elementy pozycjonowane relative są przesunięte o określoną wartość względem swojej normalnej pozycji w dokumencie ale nie wpływają na inne elementy.

HTML

            
    <div class="kartonik" id="jeden">Jeden</div>
   
    <div class="kartonik" id="dwa">Dwa</div>

    <div class="kartonik" id="trzy">Trzy</div>
  
    <div class="kartonik" id="cztery">Cztery</div>

CSS

            
            .kartonik 
    {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            color: white;
    }


            #dwa 
    {
            position: relative;
            top: 20px;
            left: 20px;
            background: green;
            color: white;
    }

Jeden

Dwa

Trzy

Cztery

Absolute

Elementy pozycjonowane absolute są przesunięte o określoną wartość względem swojej normalnej pozycji w dokumencie inne elementy nie zwracają na niego uwagi i zachowują się jakby ten element nie istniał.

HTML

            
    <div class="kartonik" id="jeden">Jeden</div>
   
    <div class="kartonik" id="dwa">Dwa</div>

    <div class="kartonik" id="trzy">Trzy</div>
  
    <div class="kartonik" id="cztery">Cztery</div>

CSS

            
            .kartonik 
    {
            display: inline-block;
            width: 100px;
            height: 100px;
            background: blue;
            color: white;
    }


            #dwa 
    {
            position: absolute;
            top: 20px;
            left: 20px;
            background: green;
            color: white;
    }

Jeden

Dwa

Trzy

Cztery

Fixed

Elementy pozycjonowane fixed zachowują się podobnie jak elementy pozycjonowane absolute, jednakże elementy pozycjonowane fixed pozostają podczas scrollowania w jednym stałym miejscu.

HTML


            
    <div class="tekst_lorem">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ornare libero, sed tempor velit. Donec cursus quam justo, nec finibus enim imperdiet dapibus. Aliquam pharetra nunc venenatis, posuere eros nec, tristique ante. Morbi vitae elit varius, porttitor ipsum vitae, fermentum purus. Phasellus elit neque, luctus eu sodales sed, blandit eu lacus. Etiam erat libero, dictum eu neque dignissim, accumsan bibendum justo. Fusce vel eleifend mauris. Suspendisse nec tincidunt tortor. Curabitur non ligula et augue lobortis pharetra ut ut sapien. Curabitur eget finibus ligula. Nulla mattis dui augue, et imperdiet sapien faucibus id. Integer nec libero tellus. Phasellus sed mattis risus. Aenean vel vulputate leo, et ullamcorper risus.
    Quisque lobortis, neque in tincidunt imperdiet, tellus nisl pellentesque nisi, vitae molestie ipsum erat ut mauris. Nam ullamcorper odio sed scelerisque tristique. Proin nisi mauris, cursus ac aliquam vitae, vestibulum sit amet sem. Ut vitae nulla at dui pharetra tempor. Pellentesque rhoncus porta risus nec viverra. Pellentesque imperdiet velit id elit consectetur efficitur. Maecenas varius elit arcu, a suscipit lorem ullamcorper nec. Donec mattis condimentum nulla a mollis. Pellentesque id massa at nulla faucibus tempor at eu erat. Aliquam maximus vitae erat sit amet pulvinar. Donec ut venenatis risus. Fusce scelerisque egestas finibus. Donec commodo nulla ac aliquet ultrices. Maecenas semper dolor vel facilisis auctor. Integer tincidunt tempus erat at lacinia.
    Donec imperdiet, nisi et mattis maximus, libero risus consequat ligula, quis bibendum tellus est sed tellus. Sed eu pretium leo. Pellentesque fringilla mi et efficitur volutpat. Nulla vehicula ac sapien dignissim dignissim. Suspendisse in dolor magna. Vivamus porta mauris nec leo rutrum, vitae porta odio suscipit. Nam id pulvinar odio, in feugiat tortor. Proin congue lacus sed nulla porta, in mollis metus fermentum. Aenean efficitur et augue eget vulputate. Aenean sit amet justo id felis dapibus rutrum at eu felis. Aliquam sed ornare eros. Sed egestas fermentum orci. Mauris luctus finibus nulla, non consectetur odio malesuada quis. Quisque vitae hendrerit quam, sed tincidunt felis. Praesent justo risus, feugiat sit amet porta et, vulputate vel dui. Pellentesque euismod elit in ex pretium lacinia.
    Sed eleifend tempor justo, et dapibus felis. Praesent sed purus justo. Nunc mollis odio a tellus placerat, vitae pretium turpis vehicula. Etiam magna quam, mollis quis rhoncus et, porttitor vel arcu. In tristique eros sit amet hendrerit feugiat. Maecenas fringilla ligula sit amet malesuada volutpat. Vestibulum odio est, ullamcorper id est eget, ultricies dapibus lectus. Praesent malesuada ipsum vel consequat blandit. Phasellus consequat maximus elit, ut pretium nunc elementum nec. Sed viverra porta tellus, in condimentum ligula pellentesque at. Aliquam volutpat odio elit, eget bibendum turpis congue ut.
    Vestibulum eu mollis augue. Proin tristique, leo id mattis varius, lorem eros tristique orci, quis volutpat nisi nibh eu ipsum. Aenean rutrum imperdiet nisl in efficitur. Aliquam id sapien placerat, mattis massa ac, vulputate tortor. Donec et ornare sapien. Aenean sed ultrices ipsum. Etiam efficitur tortor erat, eget ullamcorper urna ultrices ac. Integer ultricies augue at lorem lobortis, at tristique arcu scelerisque. Sed commodo erat arcu, ultricies eleifend diam porta ac. In hac habitasse platea dictumst. Vivamus cursus eget tellus at suscipit. Proin tortor eros, tincidunt dapibus dui in, cursus accumsan orci. Nam ut enim et ante consequat vehicula.
    Quisque quam nunc, vestibulum sit amet arcu in, laoreet sagittis dui. Nullam ultricies imperdiet eros a blandit. Fusce nunc arcu, scelerisque ut efficitur ac, commodo ut erat. Nulla ut pretium eros. Nulla sed nibh vehicula leo gravida sodales molestie ut purus. Sed sagittis, justo sit amet auctor ullamcorper, mauris mauris mattis elit, sit amet lacinia nisl lorem sed metus. Nam condimentum feugiat massa ut semper.
    Vestibulum eros justo, consequat sit amet arcu eu, posuere vestibulum erat. Quisque venenatis faucibus nisi, at egestas quam pharetra et. Morbi dapibus quis velit sit amet molestie. Fusce porttitor eros dapibus felis viverra malesuada ac et leo. Integer interdum eros vitae metus pretium, in accumsan nisi placerat. Sed bibendum quam odio, sit amet tempus tellus pulvinar ac. Donec consequat vestibulum dui tincidunt pharetra. Phasellus laoreet justo elit, vitae porta sem malesuada ac. Aenean ultrices maximus neque, nec dignissim justo tincidunt at. Morbi ex libero, placerat ut commodo non, efficitur ac turpis. Etiam at sapien eget diam feugiat bibendum. Morbi pellentesque, magna at fringilla molestie, elit nisi congue augue, non convallis purus neque volutpat nibh. Mauris aliquam tincidunt sem, ac vulputate erat laoreet et. Aenean rutrum auctor diam a pulvinar. Vivamus accumsan nec elit eu laoreet.
    Integer dictum efficitur urna sed feugiat. Phasellus lacinia, eros ut fermentum mollis, mauris felis tempus tellus, et imperdiet lectus quam in dolor. Vivamus dictum, libero id vulputate molestie, turpis mi rhoncus lacus, a ultrices nisi arcu eu tellus. Proin quis quam fringilla, lacinia lorem at, mollis massa. Nunc bibendum nisi non felis finibus egestas. Aenean vitae euismod arcu, sed pretium neque. Donec tempus pharetra erat sed pellentesque. In sed tempus tellus. Aenean posuere aliquam lorem et tempus. In blandit rutrum pulvinar. Nulla facilisi. Integer sit amet ligula nunc.
    Maecenas pulvinar elit nec orci consectetur vulputate. Curabitur non nisl id mauris placerat vestibulum vel in lorem. Sed rutrum quam vel risus facilisis rutrum. Proin dignissim efficitur sapien vestibulum interdum. Suspendisse finibus lacus sem, ac faucibus nunc finibus interdum. Nam quis sapien egestas, posuere urna quis, volutpat diam. Nullam id turpis ligula.
    Sed eleifend sodales mauris vitae porta. Maecenas sagittis aliquam condimentum. Phasellus nisi purus, maximus ut consectetur at, suscipit et nunc. Nam vel est quam. Cras sed ligula dolor. Sed a hendrerit ligula. Aliquam varius sollicitudin ligula, vel fringilla lectus pharetra et. Mauris scelerisque, odio ac condimentum laoreet, lorem enim congue lacus, id imperdiet odio urna sit amet dolor. Curabitur luctus, neque nec pellentesque rhoncus, odio nibh elementum tortor, ac lobortis ligula risus mollis lacus. Cras varius vitae nunc pellentesque auctor. Vestibulum eu ligula iaculis, vehicula tellus ut, auctor dolor. Sed velit justo, tempus sed sapien vel, congue ultrices augue. Quisque tincidunt nec dui in fermentum. Mauris quis tortor eget purus sodales eleifend ac vitae ligula.
    Cras vitae cursus neque, in maximus augue. Nunc ac faucibus tellus. Vivamus rhoncus, justo nec consectetur elementum, dolor ante ultrices augue, at pellentesque ipsum nulla at lectus. Nunc quis congue enim, in convallis leo. Fusce in pharetra turpis, vitae pretium mi. In eu lacus nec dolor eleifend posuere. Curabitur non sapien eleifend risus tristique venenatis. Integer odio risus, commodo vel feugiat quis, sagittis vitae felis. Vestibulum dictum tempor feugiat. Nullam ullamcorper elementum magna vel faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum tincidunt convallis.
    Praesent vitae ultrices turpis. Duis justo purus, ultrices sit amet libero quis, varius facilisis sem. Quisque pellentesque quis sem eget dapibus. Aenean neque odio, lobortis vel felis eu, rhoncus malesuada nulla. Nam eget sollicitudin quam, a euismod leo. Sed finibus nisi a pretium bibendum. Donec molestie sed lectus quis blandit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nisl nisi, tristique eget suscipit vel, volutpat nec erat. Curabitur dapibus porttitor finibus. Cras ut orci in elit aliquet dapibus quis a lorem.
    Donec ex risus, placerat a nunc vitae, cursus commodo leo. Pellentesque cursus leo id mauris luctus, in lacinia ex sagittis. Aliquam elit dolor, cursus ut cursus a, consectetur nec diam. Phasellus ullamcorper lacinia risus, eu viverra est dapibus in. Nulla tincidunt sollicitudin magna ut vehicula. Suspendisse nec molestie nunc, in elementum dolor. Donec eu nulla justo. Phasellus fermentum diam sed orci malesuada, ornare tempor arcu aliquet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tristique risus turpis, a luctus diam pulvinar a. Cras auctor eget magna ac lobortis. Curabitur posuere consequat orci. Phasellus felis nisi, mattis et lacinia vitae, ullamcorper a risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mattis ipsum, quis ornare metus. Vivamus elementum, velit ut pharetra accumsan, nibh felis tincidunt justo, vitae molestie elit tellus quis magna.
    Suspendisse blandit lobortis consectetur. Aenean vitae elit id risus blandit euismod. Pellentesque lobortis vitae libero ut scelerisque. Sed rhoncus nec neque dapibus lobortis. Quisque a tincidunt magna, in placerat turpis. Aliquam ultrices eu mi non consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dignissim vitae lectus nec faucibus. Praesent augue lectus, rhoncus et fermentum nec, laoreet sed erat. Donec finibus finibus nisl, sit amet euismod purus viverra nec. Etiam dapibus erat in magna laoreet auctor. Ut dui dolor, pulvinar eu augue posuere, congue facilisis felis. Nullam in odio eget enim commodo tincidunt a sit amet lorem. Praesent a cursus lacus. Integer pretium vel elit sed sodales.
    Ut luctus justo eget nibh mollis, vel varius tellus dapibus. Nullam tempor lacus ut sem vestibulum molestie. Vestibulum pharetra rhoncus libero in porttitor. Curabitur eleifend in urna vel faucibus. Nam nec erat ac ante maximus ornare nec sed ipsum. Morbi scelerisque placerat rhoncus. Etiam quis risus vel augue posuere tempor.
    Vivamus id cursus odio. Aenean aliquam, arcu a vestibulum rutrum, turpis nulla tincidunt tortor, convallis sagittis elit orci eget nibh. Praesent sollicitudin, felis eu consectetur faucibus, magna ipsum malesuada ligula, quis rutrum odio sapien quis tortor. Curabitur ultricies ex a libero gravida, ac lobortis ipsum sollicitudin. Duis vel justo sem. Ut interdum orci sit amet rutrum semper. Nam malesuada erat vel faucibus dictum. Integer nec leo sed eros condimentum dictum. Maecenas rhoncus turpis sed vulputate hendrerit. Mauris tincidunt feugiat elit, ac dictum nulla tincidunt at. Proin vitae nulla ornare, consectetur sem eget, viverra mauris. Mauris porttitor risus quis elit luctus, vitae finibus nibh euismod.
    Aenean risus urna, vehicula non quam non, venenatis placerat libero. Aliquam euismod quis justo et tristique. Sed condimentum dignissim nunc, nec blandit ipsum iaculis vel. Nunc faucibus egestas est, quis maximus ex consectetur et. Proin feugiat molestie pulvinar. Phasellus tincidunt sem eu consequat egestas. Donec odio nunc, luctus quis feugiat non, tempor nec ante. Aliquam feugiat enim a varius luctus. Duis sit amet ultricies risus, eu accumsan erat. Pellentesque euismod posuere est, sit amet vehicula risus bibendum sit amet. Nulla at pharetra mauris. Aenean metus turpis, vestibulum ut imperdiet pulvinar, porttitor sed quam. Praesent sit amet pharetra nunc. Nulla facilisi. In mauris justo, sollicitudin vitae euismod at, bibendum et risus.
    </p>
    <div class="kartonik" id="Jestem kwadracikiem pozycjonowany fixed :D">Jeden</div>
    </div>

CSS

            
            .kartonik
    {
            width: 100px;
            height: 100px;
            background: blue;
            color: white;
    }


            #jeden
    {
            position: fixed;
            top: 50px;
            left: 10px;
            background: green;
            color: white;
            width: 120px;
            height: 150px;
    }

            .tekst_lorem
    {
            overflow: scroll;
            height: 300px;
            width: 500px;
            padding-left: 150px;
    }

Sticky

Element pozycjonowany sticky traktowany jest element relative dopóki nie przekroczy określonego progu, od momentu przekroczenia jest traktowany jak fixed dopóki znów nie przekroczy pewnego progu. Należy pamiętać, że element sticky nie jest wspierany w niektórych wersjach IE.

HTML

            
    <dl>
        <div>
            <dt>A</dt>
            <dd>Agnieszka</dd>
            <dd>Antek</dd>
            <dd>Antoś</dd>
            <dd>Arek</dd>
            <dd>Augustyn</dd>
        </div>
        <div>
            <dt>B</dt>
            <dd>Bartek</dd>
            <dd>Berta</dd>
            <dd>Bogumił</dd>
            <dd>Bogumiła</dd>
            <dd>Bronisław</dd>
        </div>
        <div>
            <dt>C</dt>
            <dd>Czesław</dd>
        </div>
        <div>
            <dt>D</dt>
            <dd>Dominik</dd>
            <dd>Dominika</dd>
            <dd>Denis</dd>
            <dd>Dorota</dd>
            <dd>Damian</dd>
        </div>
    </dl>

CSS

            
            *
    {
            box-sizing: border-box;
    }

            dl > div
    {
            background: #FFF;
            padding: 24px 0 0 0;
    }

            dt
    {
            background: #B8C1C8;
            border-bottom: 1px solid #989EA4;
            border-top: 1px solid #717D85;
            color: #FFF;
            font: bold 18px 'Roboto';
            margin: 0;
            padding: 2px 0 0 12px;  
            position: sticky;
            top: -1px;      
    }

            dd
    {
            font: bold 20 'Roboto';
            margin: 0;
            padding: 0 0 0 12px;
            white-space: nowrap;
    }
    
            dd + dd
    {
            border-top: 1px solid #CCC;
    }

display

Do czego służy display?

Ta właściwość określa jak ma się wyświetlać dany element strony. Domyślną wartością jest inline.

Elementy blokowe vs liniowe

Elementy blokowe tworzą odrębne w pionie bloki zawartości Zachowanie blokowe jest pokazywane przez takie elementy HTML jak blockquote, div oraz nagłówki. Wartości display, które tworzą blokowy typ elementów to: block, list-item, table, compact oraz run-in.
Elementy liniowe zawartość elementu jest wyświetlana przy użyciu pudełka liniowego, czyli content jest rozmieszczany linia po linii wewnątrz zawierającego go elementu blokowego. Wartości display, które tworzą liniowy typ elementów to: inline, inline-table, compact oraz run-in. Elementy liniowe wykorzystuje się np. w nieobjętej znacznikami zawartości.

Składnia

Do elementu display dobiera się jedną wartość, która jest słowem kluczowym.

Wartości

inherit: Dziedziczy po rodzicu.
none: Ta wartość powoduje, że element jest wyświetlany tak jakby nie istniał w dokumencie.
inline: Element generuje jedno lub więcej pudełek elementu liniowego.
block: Element generuje pudełko elementu blokowego.
inline-block: Element generuje pudełko elementu blokowego, które będzie opływane otaczającą treścią, jakby było pojedynczym pudełkiem liniowym.
list-item: Element generuje pudełko blokowe dla zawartości oraz oddzielne pudełko liniowe dla pozycji listy.
compact: W zależności od sytuacji ta wartość tworzy blokowe lub liniowe pudełko.
run-in: W zależności od sytuacji ta wartość tworzy blokowe lub liniowe pudełko. Własności elementu run-in są dziedziczone z jego rodzica.
table-header-group: Element zachowuje się jak thead.
table-footer-group: Element zachowuje się jak tfoot.
table: Element zachowuje się jak element tabeli. Wartość ta jest odpowiednikiem elementu table w HTML.
inline-table: Element zachowuje się jak element tabeli HTML.
table-caption: Element zachowuje się jak element tabeli HTML.
table-cell: Element zachowuje się jak element tabeli HTML.
table-row: Element zachowuje się jak element tabeli HTML.
table-column: Element zachowuje się jak element tabeli HTML.
flex: Elementy mogą zmieniać położenie i wygląd aby uniknąć przepełnienia lub zapełnić wolną przestrzeń.
inline-flex: Zachowuje się podobnie jak flex, ale wyświetla element w tym samym wierszu co reszta.
grid: Tworzy obszar siatki na całą szerokość ekranu lub kontenera głównego.
inline-grid: Tworzy obszar dla siatki na podstawie podanych przez nas wymiarów dla komórek lub szerokości ekranu.

Zapis elementu

display: | inherit | none | inline | block | inline-block | list-item | compact | run-in | table-header-group | table-footer-group | table | inline-table | table-caption| table-cell | table-row | table-column | flex | inline-flex | grid | inline-grid |;