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 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 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
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.
Copyright 2023