Blog-Archiv

Sonntag, 19. Juli 2015

CSS Position Property

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.

  • You have 5 levels of nested HTML div elements (see source above), each has another color. You can change CSS properties of any div by using the according properties table below.

  • When positioning the yellow base div to absolute, content from below will be raised and might appear under it (in z-order), or under the properties panel, because an absolute positioned element plays no more role in position calculations for static elements. The property settings panel might be obscured then, this is what the "Pin Properties Panel" checkbox is for: it positions the panel absolutely to its current x-coordinate, and sets its z-index to 2 (thus it should always be available to repair settings).

  • In case you can not change settings any more, make a page reload. Be aware that the Firefox browser remembers the settings of input fields even across a page reload (needs Shift-Reload).

  • When you choose fixed positioning, the element will disappear. You will see it again when you set top to e.g. 1. Watch then that you can scroll the page content below it, the fixed element won't move.

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:




Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)