There are four offset properties: top left bottom right.
Positive offset values push the element sides inwards, towards the center of the containing block. Negative values push the sides outwards, away from the containing block sides. The values are always relative to the corresponding edges of the containing block.
The entire element, including its margins, paddings, borders, etc. and the space they occupy, is 'moved'.
An elements width and height can be limited using
min-width max-width along with
min-height max-height
(Note: all the examples have a parent box with
position: relative and a child box with
position: absolute)
position: absoluteYou might expect to see this:
but when you change the child element's position to 'absolute' you see this:
What happened to the containing block?? If the element has an explicit size and the containing block has no other content, setting the element position to absolute will cause the containing block to collapse as its 'content' (the sized element) has now been removed (taken out of normal flow) and the container, for all intents and purposes, is empty.
To make use of implicit sizing (see below) for the purpose of positioning, the containing block must have a size, if it doesn't the % values are meaningless and the element will collapse.
top: 0
left: 0
top: 50%
left: 50%
top: 50%
left: 50%
margin: 1vw
top: 0
right: 0
bottom: 0
right: 50%
top: 50%
bottom: -2em
left: 75%
right: -7em
top: 0
bottom: 0
left: 0
right: 50%
width: 50%, height: 50%
padding: 2vw
top: 0
bottom: 0
left: 0
right: 50%
padding: 2vw
top: 0
bottom: 0
left: 0
right: 50%
top: 10%
bottom: 20%
left: 50%
right: 10%
min-width: 10vw
min-height: 20vw;
top: 10%
bottom: 20%
left: 50%
right: 10%
min-width: 10vw; height: auto
top: 10%
bottom: auto
left: 50%
right: 10%