position: absolute | relative
This is referencing the first parent element. Absolute means it’s removed from the normal flow of contents, while relative can float elsewhere while its reserved space remains intact
float: left | right; (There are only two options for an element to be floated)
Example
—
img{
float: right;
margin-left: 10px;
width: 100;
}
p{
float: left;
width: 100;
}
If both elements ‘img’ and ‘p’ are to float side by side, they should have the same width. The float properties should be opposite, and the ‘img’ margin should be set to that element ‘p’ doesn’t get too close.
How to clear float settings:
.floating{
float: right | left;
}
.clearFloat {
clear: both | left | right;
}
Note: Since float will affect elements after its
breaker can be issued to protect the downstream elements from the floats
Handling the overflow of content:
div {
width: 100px;
height: 100px;
overflow: visible (default) | scroll | hidden | auto (only show scroll bars if overflowing)
}
z-index
Works when elements are set with position
.box1{
width: 100px;
height: 100px;
color: blue;
z-index: 5;
position: relative;
}
.box2{
width: 100px;
height: 100px;
color: red;
z-index: 4;
position: relative;
}