top, bottom, left & right

lets take a look at the top, bottom, left & right property

top, bottom, left & right are the CSS properties that we usually set together with the position property to control the placement of elements relative to the top, bottom, left, and right of either the browser window or its nearest ancestor (parent, grandparent, or great-grandparent container element). These properties accepts any length units (px, rem, em, %, etc.)

taught by Tina May

we can use all 4 directional properties to push and pull

We can push and pull an element if we give it a relative position. And when we give that element one of the four directional properties (top, bottom left or right) a positive number, the element will be pushed from that direction, while if we give the element a negative number, it will be pulled into that direction.

position:

menu

we can use all 4 directional properties to set the position of an element

We can set the position an element if we give it an absolute position and its parent a relative position. When we give that element one of the four directional properties (top, bottom left or right) a positive number, the element will align to its parent’s edge (same edge as the property) and then pushed from that direction, while if we give the element a negative number, it will be pushed into that direction.

position:

Tip: When we give an element an absolute position, it removes it from the normal flow of the page, and other elements will naturally go where it was.

menu

explore all positioning properties

Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.

position

top, bottom, left & right

z-index

Copyright 2023