Display
Description
The display is the property which specifies how an element is displayed on a web page.
Here are some of the main values:
- - display: none;
- - display: inline;
- - display: block;
- - display: inline-block;
- - display: flex;
Position
Description
The position property defines the location of an element. The location is determined by the specific element's position which is related to the element you want to move. (e.g. parent element)
Main values would be...
- - position: static;
- - position: absolute;
- - position: fixed;
- - position: relative;
Example
The header of our webpage uses "position: fixed;" If you scroll down in this page, you can see that the header is always sticked to the top of the window.
Z-index
Description
The z-index property defines the order of some elements when they are overlapped.
Main values are the followings...
- - z-index: auto;
- - z-index: number;
- - z-index: initial;
- - z-index: inherit;
Float
Description
The float property enables you to float an element to the left, right, or not.
The following values are often used...
- - float: none;
- - float: left;
- - float: right;