1. position: sticky; coś jak fixed tylko rusza się dopiero od wskazanego miejsca (trzeba użyć przy tym funkcji np. top: 0;) czyli od momentu podczas scrollowania dany element zacznie się przesuwać gdy będzie pomiędzy elementem a górną krawędzią strony 0px.
  2. position: static; (domyślne) - pozycjonowanie statyczne, nieruchome.
  3. position: relative; - pozycjonowanie względne (względem siebie).
  4. position: absolute; - bezwzględny/niezależny od niczego. (tekst jest bezwzględnie w wyznaczonym miejscu, może nawet najeżdżać na inny element.) (nie bierze pod uwagę scrolla)


  5. position: fixed; - pozycja ustalona. (bierze pod uwagę scrolla)
  6. float: - (unoszenie się, opływać) można użyć np. right wtedy obrazek jest po prawej stronie tekstu a tekst go 'opływa'.
  7. style="clear: ;" - odcinanie się od dostawionego obrazka z użyciem float.
  8. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, sequi. Mollitia, sit repellat! Doloribus in rerum sequi non, distinctio totam error voluptatum, placeat, beatae deleniti eos earum klaustrofobia numquam ea! Voluptate! Earum, ducimus omnis architecto temporibus molestias consequatur provident iste harum veritatis hic voluptatum dolor, illum tempora in, pariatur ullam reiciendis? Corporis ad reiciendis dolorum possimus odio placeat? Consequuntur, quos veniam! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime numquam excepturi voluptate obcaecati rerum. Omnis a consequuntur tenetur recusandae molestias neque atque laborum quidem est, ducimus dolorum numquam iure corrupti. Impedit porro vitae quas eius recusandae sit repudiandae aperiam, amet doloremque nostrum veniam incidunt cumque tempora, sed possimus saepe at ea dicta consequuntur. In architecto sint at recusandae nesciunt quae? Delectus commodi obcaecati officia porro officiis magni sit magnam iusto ab dicta, ipsum vero quibusdam suscipit, debitis explicabo dolorem ratione, nulla aliquid pariatur. Libero ea sint beatae harum mollitia adipisci.

    Rerum aut autem accusamus, natus voluptate cumque cupiditate optio dolores quo blanditiis commodi quidem aliquam possimus distinctio suscipit quas architecto repellat voluptatibus dolor quos voluptas nostrum voluptatem aperiam quia! Vel! Ut reiciendis rerum voluptates voluptatem doloremque adipisci omnis blanditiis minus nulla similique doloribus, placeat odio. Sequi distinctio sed cupiditate debitis fuga aliquid voluptatum possimus provident eveniet tempore, exercitationem iste. Placeat! Qui, itaque eaque perspiciatis consequatur rem maiores explicabo delectus nesciunt. Veniam impedit fuga dolorem. Ipsam voluptatum odio harum, ut, praesentium aperiam quas veritatis libero velit, modi est eveniet voluptas doloribus. Quo suscipit officia explicabo aliquid corporis, doloribus dolorum, porro nesciunt eaque ab saepe assumenda pariatur atque quisquam accusantium vel facere molestias inventore possimus doloremque? Numquam accusantium delectus amet voluptatem nesciunt. Assumenda, ut minima necessitatibus aliquam suscipit fugit nesciunt doloribus tenetur maxime obcaecati unde, quas dolores dignissimos rem laborum sed. Numquam velit quibusdam rem suscipit amet, minima cumque harum nostrum eligendi? Aperiam necessitatibus nesciunt minima repudiandae, vel deleniti beatae id voluptatibus. Labore, deserunt adipisci tempora, unde accusamus rem consequatur consectetur, esse fuga voluptatum commodi fugiat debitis quam nostrum magnam dolores enim! Incidunt corrupti dolore, nihil nostrum dignissimos consequuntur minima enim quasi eveniet vel nesciunt provident, soluta explicabo beatae libero laborum ut. Ducimus tempore optio illum accusantium inventore voluptas. Quam, suscipit fuga.

  9. z-index: 0 - ustawienie warstwy. np. jeżeli są nałożone na siebie trzy kolorowe kwadraty to ten który będzie miał wyższy z-index będzie widoczny na samej górze ( w najwyższej warstwie).
z-index: 0;
z-index: 1;
z-index: 0;