CSS - Position Properties
When we position our elements sometimes our elements overlap with each other. The elements overlap because they stack in the order they appear in the DOM.
We can change the stacking order of overlapping elements using z-index.
Let us discuss on z-index property.
Z-index specifies how the elements should be stacked on a web page. Element with the greatest stack order is always at the front.
Z-index works only on positioned elements other than a static position. Value of z-index can be any number including negative values.
When there is a parent-child relationship between the elements then the z-index value of the child will be relative to its parent z-index value.
.png)
Let us see the usage of z-index property in the below example.
.png)
.png)
Let us see the usage of the z-index property when the HTML elements share a parent-child relationship in the below example.
.png)
.png)
The next property that we are going to discuss is the float and clear.
You might be wondering why we use float and clear property.
Well, we use these properties when we want to wrap one element around another element like the layout used in newspaper and magazines.
Let us discuss float and clear property in detail.
Float property specifies whether an element should float or not, where text and inline elements will wrap around it.
The property can take 3 values: left, right and none.
| float property | Description |
|---|---|
| left | Indicates that element should float on the left of its containing block |
| right | Indicates that element should float on the right of its containing block |
| none | Indicates that the element will not float. Default value |
Clear property specifies that no elements should float on a particular element.
The property can take 4 values: left, right, both and none.
| clear property | Description |
|---|---|
| left | Indicates that floating elements are not allowed on the left side |
| right | Indicates that floating elements are not allowed on the right side |
| both | Indicates that floating elements are not allowed on both the sides |
| none | Indicates floating elements are allowed on both sides. Default value |
Let us see the usage of float property in the below example.
Let us see the usage of clear property in the below example.
