CSS : Priority of display, float and position CS3382 - Week11

There is priority between display, float and position, so their setting may cover each other if not in appropriate use.
Symbol meaning
=> : become setting of
: other than

1. display : none => no position, no float
2. display : none => position : absolute OR fixed
3. display : block AND float : none => top, bottom, left. right (use absolute position)
4. float : none=> display : block, box use float
4. => display

position : relative
means the latter item's position will be calculate by the former item +
top, bottom, left. right.

e.g.
the parent container of former item and latter item is at (10, 10)
former item at (100, 200)

latter-item {
position : relative;
top : 10px;
}

latter item will be at (110, 200)

However,

latter-item {
position : absolute
top : 10px;
}

latter item will be at (20, 10)