Does the CSS position relative have a performance impact on DOM rendering?

Question

I have a habit of setting position: relative on most of my DOM elements when I apply a display style.

.something {
    display: block;
    position: relative;
}

It is something that I've been doing for a few years now, and recently I had a discussion with someone who stated that setting many of these will slow down rendering in the web browser.

Is there anything in the CSS specifications or guidelines that states that it should be set sparingly?

I'm looking for a specific answer that states position: relative has X cost in performance, or creditable references that it has no cost.

Answer 1

The previous answer suggesting you try toggling relative and observe that it's "instantaneous" is speculative, qualitative, and inaccurate.

Break the habit. Unnecessary relative slows down rendering. I once observed an accidental ~40% rendering speed improvement on a list component (think dozens-to-hundreds of rows) by removing a single unnecessary instance of relative.

It also implies to a future reader/maintainer of your code (potentially even future-you) that the relative had some purpose to begin with, and that future person may be hesitant to make changes as a result. Never leave needless code behind.

Answer 2

Adding any CSS will always slow down your code, but for something so small, it will be minuscule and not worth worrying about. There's nothing special about display: block that requires you setting a position value. What is important that it's bad practice to always be adding this unless you know that you need it.

I'd drop the habit and only use position: relative on a per case basis.

As pointed out in the comments, position: static is default.

Edit:

You mentioned you're looking for some research showing performance impact of this CSS rule. Here's a great article on the topic:

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Edit, Local test:

Inspect element on the StackOverflow home page. Each post is an element with a class question-summary. Add a new CSS rule:

.question-summary{
    position: absolute;
    position: relative;
}

Make sure both are rules are active. Then check and uncheck position: relative. Notice that it happens instantaneously. This is rendering a bunch of elements. If you want to test further, copy and paste the question-summary divs and add hundreds of them. Then repeat the test. Notice how the browser renders this instantly.

Edit #2:

There's some articles out there breaking down how web browsers and browser engines work under the hood, this is complicated and you'll need to study it. This seems to be a good place to start: http://taligarsiel.com/Projects/howbrowserswork1.htm#Webkit_CSS_parser

If you want to learn past the articles you find online, you may need to dig into the web browser's engine's source code. Webkit is common and open source: https://webkit.org/

Again, if you don't want to dive into understanding web browser CSS interpretation, you'll need to rely on testing. Developers generally spend their time optimizing for JavaScript rather than CSS, so there's not a lot out there. I did find this:

https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/