//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

The short version

<style>
	#exampleID {
		position: absolute;
		top: 100px;
		left: 100px;
	}
</style>
			

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