Scribd
Upload
3 views14 pages

Css Notes

CSS notes

Uploaded by

jilanilk2907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views14 pages

Css Notes

CSS notes

Uploaded by

jilanilk2907
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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