CSS

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

marker, a
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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *