Difference between static and relative positioning

Question

In CSS, what is the difference between static (default) positioning and relative positioning?

*A difference* is that you frequently type `position: relative`, and you *never* type `position: static` :) — thirtydot, Feb 16 '11 at 00:42

Matthew Abbott · Accepted Answer · 2013-10-16T10:15:43.023

192

Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:

statically-positioned elements obey normal HTML flow.

Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:

relatively-positioned elements obey HTML flow, but provide the ability to adjust their position relative to their normal position in HTML flow.

There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:

absolutely-positioned elements are taken out of HTML flow and can be positioned at a specific place in the document...

And when a position: relative is applied to a parent element in the hierarchy:

...or positioned relative to the first parent element in the HTML tree that is relatively positioned.

Note how our absolutely-position element is bound by the relatively-positioned element.

And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:

fixed-positioned elements are also taken out of HTML flow, but are not bound by the viewport and will not scroll with the page.

You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:

fixed-positioned elements have no effect on scroll.

Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:

absolutely-positioned elements are still affected by the boundaries of the viewport, unless overflow is used on a parent element.

..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).

With absolute positioning and fixed positioning, the elements are taken out of HTML flow.

edited Oct 16 '13 at 10:15

answered Feb 16 '11 at 00:45

Matthew Abbott

60,571
9
104
129

5

Good answer, but (for relative position) isn't the offset based on the normal position of the element? – Baztoune Feb 16 '11 at 00:57
5

I agree with Baztoune, this definition for relatively positioned elements is misleading. A `static` and `relative` element are the same, except with the latter you can reposition it **relative to its original position**, not to the containing element — that's where `absolute` comes in. Also, like any element positioned using a value other than `static` you can use `z-index`. – Ryan Williams Oct 13 '13 at 18:41
I've reworked this answer to more accurately define relative positioning and included images to demonstrate the different position types. – Matthew Abbott Oct 16 '13 at 10:16
4

I wonder why CSS would still implement `position: static;` instead of simply replacing it with `position: relative;` by default ? If one doesn't want to position item other than `top: 0;` and `left: 0;` then let's not do it, right ? Is there an underlying reason why `position: static;` is still required as part of CSS ? – cram2208 Aug 31 '15 at 15:05
Don't forget `z-index`. Static doesn't obey that either. – Quangdao Nguyen Mar 29 '17 at 21:27
11

@cram2208 because relative makes children absolute positioned nodes be positioned relative to them, static allows absolutely positioned children to ignore their position and be positioned relative to the nearest relative positioned element. Its an important concept to have – Felype Sep 13 '17 at 15:24

score 8 · Answer 2 · answered Oct 14 '16 at 14:24

In answer to "why CSS would still implement position: static;" in one scenerio, using position:relative for a parent and position:absolute for the child limits the scaling width of the child. In a horizontal menu system, where you could have 'columns' of links, using 'width:auto' does not work with relative parents. In this case, changing it to 'static' will allow the width to be variable dependent on the content within.

I spent a good few hours wondering why I couldn't get my container to adjust based on the amount of content within it. Hope this helps!

score 7 · Answer 3 · edited Jul 14 '14 at 12:12

7

You can see a simple overview here: W3School

Also, if I recall correctly, when declaring an element relative, it will by default stay in the same place as it otherwise should, but you gain the ability to absolutely position elements inside it relatively to this element, which I've found very useful in the past.

edited Jul 14 '14 at 12:12

MarmiK

5,639
6
40
49

answered Feb 16 '11 at 00:45

Stoffe

2,744
2
25
24

Meanwhile, in 2022, W3Schools is still dependent on ad revenue while other venues of arguably better information (like [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/position#values)) do not, reducing the need for ad blockers and the like. – Heretic Monkey Oct 19 '22 at 23:08

score 6 · Answer 4 · answered Feb 16 '11 at 00:43

6

Position relative lets you use top/bottom/left/right for positioning. Static won't let you do this unless you use margin parameters. There's a difference between Top and margin-top.

You won't need to use static much as it's default

answered Feb 16 '11 at 00:43

frontsideup

2,833
1
21
23

score 2 · Answer 5 · edited Sep 28 '12 at 10:06

2

Relative position is relative to the normal flow. The relative position of that element (with offsets) is relative to the position where that element would have been normally if not moved.

edited Sep 28 '12 at 10:06

ЯegDwight

24,821
10
45
52

answered Sep 07 '12 at 10:07

AvadhootKulkarni

31
2

score 2 · Answer 6 · edited May 23 '17 at 12:09

2

Matthew Abbott has a really good answer.

Absolute and relative positioned items obey top, left, right and bottom commands (offsets) where static positioned items do not.

Relatively positioned items move offsets from where they would normally be in the html.

Absolute positioned items move offsets from the document or the next relatively positioned element up the DOM tree.

edited May 23 '17 at 12:09

Community

1
1

answered Sep 08 '15 at 20:33

Connor Leech

18,052
30
105
150

score -3 · Answer 7 · answered Apr 05 '21 at 17:49

Static: By default the position of elements is static. If you add property such as top, bottom, right, or left nothing will be implemented.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#static #middle{
    position:static;
    top:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
   <section id="static">
       <h2>Static</h2>
       <div></div>
       <div id="middle"></div>
       <div></div>
   </section>
</body>
</html>

Relative: The change in position will be relevant to that div's original place.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#relative #middle{
    position:relative;
    top:100px;
    left:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
   <h1>Position Property</h1>
 <section id="relative">
    <h2>Relative</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

Absolute: It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Source:MDN

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#absolute{
    position:relative;
}

#absolute #middle{
    position:absolute;
    top:10px;
    left:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
    <h2>Absolute</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>

</body>
</html>

Fixed: The fixed property would stay at the same place even after we scroll the page. The position is relative to the containing block always.

div{
    width:200px;
    height:200px;
    background-color:yellow;
    display:inline-block;
}

#middle{
    background-color:pink;
}

#fixed #middle{
    position:fixed;
    top:10px;
    left:10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
    <h2>Fixed</h2>
    <div></div>
    <div id="middle"></div>
    <div></div>
</section>
</body>
</html>

This does not seem to add anything to the existin ganswers. – TylerH Oct 19 '22 at 23:04 — TylerH, Oct 19 '22 at 23:04

Difference between static and relative positioning

7 Answers7

Linked

Related