The Smoke Detector
  • About
    • About TSD
    • Contact us
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
The Smoke Detector
  • About
    • About TSD
    • Contact us
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
  • Coding

CSS Position Property explained

  • Ivona Josipovic
  • 26 January 2023

The CSS position property is very handy when it comes to positioning elements on the page. It might be a bit confusing at first, but it’s definitely worth digging into. Sure flex and grid will dominate most uses, but from time to time you will need a good old position property to achieve just what you have imagined.

There are five different positions that can be used: static, relative, absolute, fixed, and sticky. Let’s dive into each of them.

Static

Static is the default position that all the elements have unless we state otherwise. It follows the document flow and left, right, top, bottom, and z-index properties have no effect on it.

Relative

The relative position allows us to offset an element in relation to its original place in the document. We can use the top, bottom, left, and right properties to guide it. The relatively located element does not affect the positioning of other elements around it.

Absolute

Similarly to the relative option, the absolute position allows us to place an element with the help of left, right, top, and bottom. But, the difference is that the absolute position is determined in comparison to the positioned ancestor element (the first ancestor that has a declared position). If there’s no such ancestor then it’s placed in connection to the initial containing element. (like the HTML document) Another important differentiation from the relative is that the element is removed from the normal document flow.

Fixed

Fixed, as the name states, provides a fixed position that stays the same even when we move around the page (for example if we scroll). It also works in regard to the HTML document, and not the ancestors (in difference to absolute that looks at positioned ancestors first).

Sticky

Sticky is a combination of relative and fixed. I would put it like this – it provides the relative placement until the sticky one is needed. So an element has its usual position in the document flow until we start scrolling and then it becomes sticky (sticks to its fixed positioning).

If you want to play around and test different positions you can easily do that here with their ‘Try it yourself’ option.

Share
Tweet
Pin it
Share
Share
Related Topics
  • absolute
  • css
  • css position property
  • explained
  • fixed
  • learning programming
  • relative
  • static
  • sticky
Ivona Josipovic

Ivona Josipovic is a co-founder of The Smoke Detector, writer, fashion stylist, social media manager, curious creature, chocolate lover.

You May Also Like
View Post
  • Fashion

Nordgreen Copenhagen watch review

  • Ivona Josipovic
  • 8 August 2020
View Post
  • Fashion
  • Interviews

Interview with Joanna Bark and Elena Ekström, founders of Bukvy

  • Ivona Josipovic
  • 30 March 2020
View Post
  • Fashion

The evolution of male red carpet style

  • Ivona Josipovic
  • 18 March 2020
View Post
  • Fashion

Christian Louboutin Exhibition, L’Exhibitioniste – Paris 2020

  • Ivona Josipovic
  • 25 February 2020
View Post
  • Fashion

Best Fashion documentaries – part 3

  • Ivona Josipovic
  • 6 March 2020
View Post
  • Fashion

Best handbag brands to know in 2020

  • Ivona Josipovic
  • 11 February 2020

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Featured Posts
  • 1
    • Fashion
    Nordgreen Copenhagen watch review
    • 8 August 2020
  • 2
    • Fashion
    • Interviews
    Interview with Joanna Bark and Elena Ekström, founders of Bukvy
    • 30 March 2020
  • 3
    • Fashion
    The evolution of male red carpet style
    • 18 March 2020
  • 4
    • Fashion
    Christian Louboutin Exhibition, L’Exhibitioniste – Paris 2020
    • 25 February 2020
  • 5
    • Fashion
    Best Fashion documentaries – part 3
    • 6 March 2020
  • 6
    • Fashion
    Best handbag brands to know in 2020
    • 11 February 2020
  • 7
    • Fashion
    Best fashion quotes with strong messages
    • 31 January 2020
  • 8
    • Fashion
    10 ways fashion has changed in the 2010s
    • 4 January 2020
  • 9
    • Art / Design
    • Interviews
    Interview with Elisabeth van Aalderen, the photographer behind Vitiligo photo project
    • 16 December 2019
  • 10
    • Art / Design
    Illustrators celebrating womanhood we love following on IG
    • 10 January 2020
Reflection. 🌴
The world need more love. BLM! 🖤 Regram from @inesabouchard .
Don't miss reading our interview with the founders of the amazing @bukvybag brand. This female-led accessories brand is based in Stockholm and focused on creating practical pieces for everyday life. 😍 Link in bio. #bukvy #bukvybag #interview #femalefounders
Daydreaming of places as this one... 💙 Follow the super talented @salvalopez for more amazing images like this... #photography #pink #daydreaming
Gorgeous images by @nina_zimolong. 💟 In case you missed our interview with the talented photographer go to our site to read it. #photography #interview #love #stunning
Lazy Sunday mani inspo from @vanessahong. Nothing like some cute polka dots for mood boosting, right? 😍 #cute #manicure #loveit #polkadots
The Smoke Detector
  • About
  • Art / Design
  • Beauty
  • Fashion
  • Interviews
  • Columns
  • Coding
The Smoke Detector covers photography, fashion, art, design, cool people and places

Input your search keywords and press Enter.