<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>
/* It is helpful to always use position: absolute when you are learning */
#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
-
position: static— makes the element unmovable -
position: fixed— sets the position according to the browser window -
position: relative— sets the position according to the element's normal position -
position: absolute— sets the position according to the whole document
Watch out!
Everything starts off as position: static!
Until you set an HTML to another
position mode,
it WILL NOT MOVE!
The safest mode for beginners is to use
position: absolute;
Words of wisdom:
only use top: and left: positions!
People will view your work on different devices.
These devices will have screens of different sizes and height:width ratios.
To keep your pages visually consistent, avoid using
bottom: and right: positioning.
Learn more
- Khan Academy on height, width, and overflow , CSS position , and CSS floating elements ,
- w3schools.com on CSS positioning