CSS Position Property

Published: 2015-07-19
Updated: 2015-11-29
Web: https://fritzthecat-blog.blogspot.com/2015/07/css-position-property.html

I believe it is a common sense that the CSS layout properties are not as easy to understand and apply as for example color and border. This is due to the fact that a rule-language like CSS is not the adequate means to specify layout. But anyway it is used for it, and we have to live with a property like position. Even when the display property is of same importance, I will focus only on position in this Blog. Here are its possible values: 

position: static;
position: relative;
position: absolute;
position: fixed;

Static is Default

position: static; is the default setting when no position was given. It means that block elements are placed below each other, and inline elements beside each other. In other words, everything is like we know it from web browsers.

It makes no sense to define top, left, right and bottom coordinates on a static element, they will simply be ignored.

Relative Meanings

position: relative; has two meanings:

  1. it makes the top, left, right and bottom properties available for the element (which would be ignored by static positioning)
  2. it marks an element as parent for absolute positioning of child elements

In practice this means that you can relatively adjust such an element by using top, left, right and bottom, but more frequently such positioning means that the element is used as parent for absolutely positioned child elements.

Absolute is Relative

The "Oops" effect when you find out that position: absolute; means positioning relatively to the parent element. But not to any parent element, only to a non-static parent element!

In other words, you pin the absolute element to a non-static parent and then position it using top, left, right and bottom. It will always stay there, even when other children might scroll away.

This relative/absolute pairing also works recursively. Useful e.g. for a fixed table header. Mind that the top, left, right and bottom coordinates are relative to the HTML page, not to the browser view-port.

There are two more things to say about absolutely positioned elements:

  1. a block element does not expand to 100% width any more, it expands just to the width its content (text) demands
  2. the element goes above static elements (in z-direction), in a way that it will overlap them, because additionally static elements behave as it would not be there any more

Fixed relatively to Browser, not to Page

When you want to have a button that always stays in some corner of the browser client window, then you must use a position: fixed; assignment. This pins the element to the browser view-port, and it won't scroll when the browser content is scrolled. Of course you can also use top, left, right and bottom here.

Very suitable also for dialog windows that should appear relative to the browser window, and not relative to the (possibly much bigger) page content.

Sandbox

We need to play around with this to understand it. I created a test page that provides several levels of nested div elements. You can use it for testing by setting position, top, left, right, bottom properties to these elements, and see where it goes then.

Click to see the HTML structure. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Absolute and Relative Positioning</title>
    
    <style type="text/css">
      #level-0 {
        background-color: yellow;
        height: 22em;
      }
      #level-1 {
        background-color: orange;
        height: 19.5em;
      }
      #level-2 {
        background-color: magenta;
        height: 17em;
      }
      #level-3_1, #level-3_2 {
        height: 7em;
      }
      #level-4_1, #level-4_2 {
        height: 2em;
      }
      #level-3_1 {
        background-color: cyan;
      }
      #level-3_2 {
        background-color: SkyBlue;
      }
      #level-4_1 {
        background-color: PaleGreen;
      }
      #level-4_2 {
        background-color: LawnGreen;
      }
    </style>
</head>
  
<body>

  <div style="margin-left: 10%; margin-right: 10%; max-height: 25em; overflow: auto; border: 1px dotted black;">
  
    <div id="level-0">
      Level 0
    
      <div id="level-1">
        Level 1
        
        <div id="level-2">
          Level 2
          
          <div id="level-3_1">
            Level 3 / 1
            
            <div id="level-4_1">
              Level 4 / 1
            </div>
            
            <div id="level-4_2">
              Level 4 / 2
            </div>
            
          </div>
          
          <div id="level-3_2">
            Level 3 / 2
          </div>
            
        </div>
        
      </div>
      
    </div>

  </div>

</body>
</html>

This colorful test page needs some explanations.

There might be some more comments needed here, but maybe you'll discover everything on your own now. Mind that in most browsers the top and left properties overrule right and bottom. You can not size the element by using e.g. both left and right.

Faites vos sable jeux, s'il vous plaît :-)


Level 0
Level 1
Level 2
Level 3 / 1
Level 4 / 1
Level 4 / 2
Level 3 / 2

CSS Style Properties

Pin Properties Panel
Level 0
position:
height:
width:
top:
left:
right:
bottom:
Level 1
position:
height:
width:
top:
left:
right:
bottom:
Level 2
position:
height:
width:
top:
left:
right:
bottom:
Level 3 / 1
position:
height:
width:
top:
left:
right:
bottom:
Level 4 / 1
position:
height:
width:
top:
left:
right:
bottom:
Level 4 / 2
position:
height:
width:
top:
left:
right:
bottom:
Level 3 / 2
position:
height:
width:
top:
left:
right:
bottom:




ɔ⃝ Fritz Ritzberger, 2015-07-19