Scribd
Upload
3 views

Css Notes

CSS notes

Uploaded by

jilanilk2907
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Css Notes

CSS notes

Uploaded by

jilanilk2907
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

CSS With Examples

Position
The `position` property specifies how an element is positioned in a document. It has five
values:

1. **Static**: The default value. The element is positioned according to the normal flow of the
document.

element {
position: static;
}

2. **Relative**: The element is positioned relative to its normal position.

element {
position: relative;
top: 10px;
left: 20px;
}

3. **Absolute**: The element is positioned relative to the nearest positioned ancestor (not
static).

element {
position: absolute;
top: 50px;
right: 30px;
}

4. **Fixed**: The element is positioned relative to the browser window and doesn't move when
scrolling.

element {
position: fixed;
bottom: 0;
right: 0;
}

5. **Sticky**: The element is toggled between relative and fixed, depending on the
scroll position.
element {
position: sticky;
top: 0;
}
Z-index
The `z-index` property controls the vertical stacking order of elements. Elements with
higher `z-index` values will appear on top of those with lower values.

element {
position: absolute;
z-index: 10;
}

Float
The `float` property is used for positioning and wrapping elements around other elements
(often used for images).
- **Left**: Floats the element to the left.
- **Right**: Floats the element to the right.
- **None**: Default value, no floating.

element {
float: left
width: 50%;
}

You might also like