Deep Tech Point
first stop in your tech adventure
Home / CSS
August 13, 2021 | CSS

CSS layout properties may intimidate you, especially if you’re learning web development for the first time. Especially the position property. Some even claim it’s an advanced subject. Nevertheless, it is essential to understand how CSS affects the alignment of elements on the page. CSS allows a few different methods for positioning elements, and the most common are position, float, and display. We discussed the display property that specifies the display behavior of an element in the previous article, but this time we will learn more about the CSS property, called position. We will learn what position property is, the types, how they affect the position of an element on a page, how they compare to each other, and most of all what is the typical use for each position property. Let’s get started!

What is position property?

The position property sets how an element is positioned in a document. It goes hand in hand with the top, right, bottom, left, and z-index position properties and helps you manipulate the final position or location of an element. If you want, you can always check the position of an element of your choice through the browser dev tools, just go to the Styles panel and choose computed and search for the position.
The position property can take five values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Let’s discuss each of them and see how each value determines how an element is positioned in a document.

1. position: static

Position: static is the default value for every HTML element on the page. It means that an element is positioned according to the normal page flow. Position property won’t be affected by properties that can make an impact on other CSS position types, so if there are left, right, top, bottom, and z-index properties set, they will not affect an element with position: static.

  • the default value for every HTML element
  • respects the normal render flow
  • not affect by left, right, top, bottom, and z-index properties

The practical use of position: static

Statically positioned elements (in technical terms these elements are not positioned at all) represent the default value for all elements. In practice, this will work in more than 99% of cases of web development, especially if you’re developing standard websites.

2. position: relative

What the relative position really means is “relative to itself”. It is actually just like the static position, however relative to its static default position this value uses the advantage of using top, right, bottom, left and z-index to determine the final position.
If you set relative position on an element without at least one of the positioning attributes (top, right, bottom, left), the defined position will not affect the element’s positioning at all, and it will stay exactly as it would be if you left the default static position.
In simplified terms, just like with the static value, an element’s original position still follows the render flow of the document, but the properties of top, right, bottom, left and z-index move the element from the original position – they relocate it relative to its initial position. When we want to specify the amount of offset to an element, we need to set the values for at least one of the values, either top, right, bottom, left, or z-index value. However, notice – there will be extra space where the element would have been. Therefore, the offset we specify will not influence the position of any other element on the page. Consequently, the space given to the element in the page layout is the same as if the position was static.
In practice, for example, if you give a relatively positioned element a positioning attribute top: 100px, it will move the element 100px down from where it would be and will leave that extra space where the element would have been if we hadn’t moved it. The moved element doesn’t influence the position of any other element on the page. Even if you don’t set a z-index value, the relatively positioned element will now appear on top of any other statically positioned element, in the example above it will appear above the element that is positioned below (if it’s positioned close enough). This is called a stacking effect, very similar to creating a set of layers that are stacked based on the element with the specified z-index. You can’t fight it by setting a higher z-index value on a statically positioned element, because a statically positioned element doesn’t accept position attributes. So, if you want to avoid that stacking context, we need to set that value to auto.

  • similar to the static position
  • respects the normal render flow
  • left, right, top, bottom, and z-index offsets have an effect
  • extra space left where the element would have been without offset
  • does not influence the position of any other element on the page

The practical use of absolute position: relative

In practice, you will probably use position: relative to “fix position” of elements that do not line up how they should, or at least you would want them to line up (we’re talking about one or two pixels nudge).
Relative positioning could be also used for animation on elements that are statically positioned until JavaScript gets involved. This way we establishing a containing block for absolute positioning so the element itself isn’t moved at all.
It can also be applied to an element when we know the inner element of that element is going to be positioned absolutely. For example, when we have two divs and the outside div is a static block and elements inside the outer div are going to be positioned: absolute relative to the outer div. Then we use position: relative for the outer div and inner div should use position: absolute. Now the inner div elements can be placed anywhere using top, right, bottom, and left attributes of CSS.

3. position: absolute

Absolutely positioned elements are closely connected to their parents. Rather than being positioned according to the viewport, absolute elements are positioned relative to the nearest positioned ancestor (which means that the parent element has to have a position value other than the default position: static). If their closest positioned ancestor does not have that position, an absolute element is positioned relative to the next parent element that is positioned (other than static). And if even that is not the case, the absolute element will be placed relative to the initial containing block and will move with scrolling.
The element with absolute position is removed from the normal document flow. No space is created for that element in the page layout and other elements behave as if that element is not in the document – like the absolute element never existed in the first place – and this is probably the biggest trade-off with absolutely positioned elements. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
All the other positional properties – the values of left, top, bottom, right, and z-index will work on the element with absolute position and will determine the final position of the element. If the value of the z-index is not auto, it will create a stacking context.
By default, absolutely positioned elements span 100% of the width of their parent element and are as tall as their child content. The total width and height is their content + padding + border width/height. It is useful to know that absolutely positioned boxes margins do not collapse with other margins.

  • removed from the normal document flow
  • no space is created for that element in the page layout
  • other elements behave as if that element is not in the document
  • the values of left, top, bottom, right, and z-index work and determine the final position
  • positioned relative to the nearest positioned ancestor
  • if there isn’t any positioned ancestor, it is placed relative to the initial containing block

The practical use of absolute position: absolute

The practical use of absolute positioning is quite rigid and makes it difficult to write layouts that respond well to changing content because they are too explicit. However, absolute positioning comes in handy, if you require freely moving elements around a page, such as drag and drop situations. Another example is when you need to overlay elements on top of each other or other layout techniques that would benefit from working on a coordinate system. An example of a chessboard game is a fine reason to use it. An undervalued benefit of absolute positioning is that it allows localized absolute positioning within the nearest positioned (not positioned: static) parent element. Absolute positioning offers precise control over nested elements on a page, without sacrificing the overall page layout.
However, when developing a more standard website, such as a site providing some publicly available service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users, so it is better to avoid it.

4. position: fixed

Compared to the relative position, the position: fixed does not respect the normal render flow and doesn’t leave any space where the element would have been located in the page layout. A fixed position will force the element to be positioned relative to the viewport (the screen the user can see) – this way the element will stay fixed even if the page is scrolled. The fixed element is positioned relative to the viewport except when one of its ancestors has a transform, perspective, or filter property set to something other than none, and in that case, that ancestor behaves as the containing block.
Compared to the elements that have an absolute position, the fixed positioned elements are removed from the flow of the document too, but unlike absolutely positioned elements, they are always relative to the document and not any particular parent. The scrolling does not affect them, which means they always stay in the same place even if the page is scrolled.
With position: fixed we automatically achieve a new stacking context, and we need to use the top, right, bottom and left values to determine the element’s final position. In printed documents, the element is placed in the same position on every page.

  • similar to absolute position
  • does not respect the normal render flow
  • doesn’t leave any space where the element would have been located in the page layout
  • causes the element to be positioned relative to the viewport and not the parent (like absolute)
  • stays in the same place (creates a “floating” element) even if the page is scrolled

The practical use of absolute position: fixed

Position: fixed is often applied for a navigation bar because you want it to remain visible at all times regardless of the page scroll position. However, there is one concern with fixed positioning, if there isn’t enough space available – it can cause situations where the fixed element overlaps content in a way it becomes inaccessible.

5. position: sticky

Element with a sticky position presents a mix, a sort of compromise between relative and fixed positions – as a result, the element is “stuck” when necessary while scrolling. That means a sticky element acts like a relatively positioned element to anything on the document (it is positioned according to the normal flow of the document) until the scroll location of the viewport reaches a specified threshold – a certain scroll point on the screen – and after that point, the sticky element acts as a fixed element – it takes a fixed position where it remains persistently displayed. From that point, a stickily positioned element is offset relative to its nearest scrolling ancestor and nearest block-level ancestor, including table-related elements, based on the values of top, right, bottom, and left. The element offset does not affect the position of any other elements.
In simple terms, the sticky element depends on the user’s scroll – on how far the user has scrolled – at first, it behaves like a relative element and after the viewport meets a specified position it gets “fixed” in a spot. A sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.

  • a mix between relative and fixed positions
  • depends on how far the user has scrolled
  • acts as a relatively positioned element to anything on the document until a certain scroll point on the screen
  • after that point, the sticky element takes a fixed position
  • at least one of the top, right, bottom or left positions must be defined
  • Internet Explorer does not support position: sticky

The practical use of absolute position: sticky

Stickily positioned elements always create a new stacking context, so stick elements are predominantly used for keeping something shown on the screen throughout scrolling, and we can also hide elements in the same way. A common use for sticky positioning is for the headings in an alphabetized list. For example, The “B” heading will appear just below the items that begin with “A” until they are scrolled offscreen. And then the “B” heading will remain fixed to the top of the viewport until all “B” items have scrolled offscreen, and then it will slide offscreen with the rest of the B items, at this point the “C” heading will show up instead of the “B” heading.

Two position values that work on any CSS property and HTML elements

We could also mention two additional position values, which work on any CSS property, and on any HTML element:

  • initial: sets position property to its default value
  • inherit: keyword specifies that property should inherit its value from its parent

Bootstrap offers three additional values for controlling element position

You should also keep in mind that Bootstrap offers three additional values for controlling element position that are also worth mentioning:

  • fixed-top: fixes the element to the top of the screen (aka top of the viewport), extending from edge to edge
  • fixed-bottom: fixes the element to the bottom of the viewport, from edge to edge
  • sticky-top: fixes the element to the top of the screen, from edge to edge, but only after you scrol past the element
August 10, 2021 | CSS

This article will take you to the very basics of CSS layout. We will look into a display property, which defines the display behavior of an element – if and how the element is positioned in a layout. Every HTML element has a default display value depending on what type of element it is, and the default display value for most elements is either inline or block. We will present a way to create boxes that can (or not) be displayed side by side, that wrap the way we expect them to wrap or to be positioned in the next line. Layouts that we used to create with floats, are now possible with a display property, so we don’t have to clear the floats.
We will explain the difference between display: inline vs inline-block vs block with examples, and will also list a few best practices and when to use each.

August 7, 2021 | CSS

This article will take you to the very beginning of working with a grid layout. We will present a super simple code for the layout of the page. We will start with a mobile view first and include a media query for a desktop version. We will go through the code and explain why we did this and that. Let’s start at the beginning, but first, let’s take a look at how our page is constructed.

August 4, 2021 | CSS

We will take you back to the basis of CSS styling. We will dive into CSS margins, padding, and borders. We will investigate what each of these properties means, what are the differences between them, and when should we use each of them. We will start with borders, and then move to margins and paddings, and see what they are all about. We will compare margins vs paddings and we will take a look at when do we typically use margins and paddings.

July 30, 2021 | CSS

This is one of the most common questions people ask when learning CSS and flexbox module – should I use flex-basis or width? Even more, why is there flex-basis property when we have width? At the end of the day: what is the difference? This article will try to convince you that flex-basis is a property with its own potential and we cannot simply replace it with a width or height.

July 28, 2021 | CSS

In short, flexbox layout is based on a direction – either horizontal or vertical (flex-flow direction) and its purpose is to align flex items in a flex container. Compared to block which is vertically-based and inline which is horizontally-based, and they work pretty well for pages, it is also important to bring out they have a flexibility problem and cannot hold up complex applications, especially when it comes to responsive design that deals with lots of orientation changing, stretching and shrinking. So, you think flexbox solves all that? Not really. Flexbox does not deal well with the complexity of big-scale layouts. Grid does. At the end of the day, grid is two-dimensional and the flexbox is one-dimensional. We talked about that and other differences in an article about Grid vs. flexbox in CSS: how are they different and when should we use them?. However, flexbox is still an appropriate approach for small-scale layouts and parts of an application and its goal is to enable a more flexible layout, in terms of aligning and distributing space among flex items in a flex container.

July 26, 2021 | CSS

This article will cover what are CSS selectors, why and how we use them, and we will also get to know different types of CSS in detail, and we will take a look at how they work. We’ve already covered selectors in QuerySelector multiple classes and other rules in JavaScript and CSS, so this is definitely the article you should also take a look at. And if you are interested in JavaScript, the article GetElementById vs. querySelector: Which is better and why use one over the other? is also something you should check, too.

July 24, 2021 | CSS

In this article, we are going to learn the difference between a pseudo-class vs pseudo-element – we are going to take a look at how they are similar and what are the differences between them. For a start, pseudo-class and pseudo-element are both CSS selectors, so this is definitely something that they have in common. The basic difference, however, is, that a pseudo-class represents a virtual CSS class, while a pseudo-element represents a virtual HTML element. Let’s take a look at what this really means.

July 22, 2021 | CSS

Both grid and flexbox – we use them for a layout – both can shrink and they can stretch, we can align and reorder elements with them. Both grid and flexbox have similarities, but most of all they have differences too and in this article, we will focus on that. We will put grid versus flexbox and we will explore how they are different (and similar) and when should we use each to find the optimal balance – the right tool for the right job.

July 20, 2021 | CSS

This article will focus on CSS and repeat() function – we will define the function, and most of all show you how and when to use it with a help of a few examples.