//CSS: Positioning

<New code>

CSS height: 100px; — sets the height of an element to 100px
CSS width: 100px; — sets the width of an element to 100px
CSS z-index: 2; — sets the stack order of an element

CSS position: static; — makes an element unmovable
CSS position: fixed; — positions according to the browser window
CSS position: relative; — positions according to the usual position in the document
CSS position: absolute; — positions according to the whole HTML document

CSS top: 100px; — positions an element 100px from the top
CSS bottom: 100px; — positions an element 100px from the bottom
CSS left: 100px; — positions an element 100px from the left
CSS right: 100px; — positions an element 100px from the right

Sometimes you want to change where things are

You can use CSS to change the location of things. Below are three images all in a row. You can apply the following styles to each of them.


Image 0 Image 1 Image 2 Image 3


So what is happening? Obviously, top: 100px; and left: 200px; place the images to the top and left of things.

But to the top and left of what?

It all depends on the positioning mode

And remember: everything starts off as position: static!

Learn more

Live example: CSS Positioning