Chapter 6.9: Position

When CSS Level 2 recommendations were released, they included the concept of a position. The position attribute is for controlling how objects are positioned on the page. There are five types of positions that CSS supports: static, absolute, relative, fixed, and sticky.

Static positioning is the default and does not need to be specified. You have been using this all the time so far so there should be no need for me to elaborate.

With absolute positioning you are specifying a location that the element is positioned at on the page and it will stay at that position. This position is specified relative to the first ancestor element that has a position attribute that is not set to static. If no such element exists, the absolution position is placed relative to the viewport. An ancestor element is simply the elements that contain the element you are positioning.

To place the element, you simply use the top or bottom parameters to set the y position and the left or right parameters to set the x position. The top uses the top edge for positioning, the left uses the left edge, the fight uses the right edge, and the bottom is the bottom of the element compared to the bottom of the container. These are relative to the container the absolute positioned element is inside. It is possible to place elements outside of the container they are part of. Likewise, negative values are permitted.

To demonstrate this here is the code for creating some relatively positioned boxes:

As seen in the demo, positioned elements do not behave like floats. They are outside the flow of the document so will overwrite whatever is underneath them. This applies to all the non-static position styles.

The next type of positioning that we can use is relative. This is similar to absolute, but instead of being positioned relative to the container it is in, the element is positioned relative to where it would normally have been placed. This is a case where a picture is worth at least a thousand words.

The fixed position option means it is positioned relative to the page position so it never moves even if you scroll the page. For example, if you wanted a purple box on the bottom of the viewport, you would do something like this:

The final position type is sticky. It stays where it is, but the provided coordinates become where it will stay if scrolled past that point. In other words, if you scroll past the position the sticky box is at, it will move as you scroll until it hits the bounds of the container that it is in. Will always stay in container, so if container scrolls off page so will the sticky. This is useful if you have several sections and want the name of the section to always be visible until you have finished that section.

S

p

a

c

e

F

o

r

S

c

r

o

l

l

i

n

g

T

h

e

C

o

n

t

a

i

n

e

r

With the different position types out of the way, you may wonder how overlapping works. Quite simply, the first object placed will be overlapped by later placed objects. If you want more control over which objects are placed where, then you will need to use a z coordinate. This comes from 3d graphics. In CSS the higher the z value, the “closer” the object is to the viewer. This means the higher z elements get drawn above lower z elements.

To set the z value, you simply need to use the z-index attribute and set it for which display level you want.

Here is the code for setting the z-indexes for the bottom boxes:

This leads to one final issue. What do we do if we want different layouts based off the resolution of the target platform? We will look at that next.