CSS Position
Advertisements
CSS Position
CSS position properties are used for set the position of Html elements. css position properties are used for set the position of text, image, for display on web page.
CSS have following position properties;
- Static
- Fixed
- Relative
- Absolute
For set position of Html elements you need position properties with values.
Syntax
p{
position:fixed;
left:10px;
top:20px;
}
All CSS Position Properties
| property | Description | value |
|---|---|---|
| bottom | It is used to set the bottom margin edge for a positioned box.. | auto, length, %, inherit. |
| clip | It is used to clip an absolutely positioned element. | shape, auto, inherit. |
| cursor | It is used to specify the type of cursors to be displayed. | url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help. |
| left | It sets a left margin edge for a positioned box. | auto, length, %, inherit. |
| right | It is used to set a right margin edge for a positioned box. | auto, length, %, inherit . |
| overflow | This property is used to define what happens if content overflow an element's box. | auto, hidden, scroll, visible, inherit |
| position | It is used to specify the type of positioning for an element. | absolute, fixed, relative, static, inherit |
| top | It is used to set a top margin edge for a positioned box. | auto, length, %, inherit |
| z-index | It is used to set stack order of an element. | number, auto, inherit |
Fixed
This properties are used for fixed position of elements, when you scroll down any web page that time these elements display on same position.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {
position: fixed;
top: 40px;
right: 10px;
color: green;
}
</style>
</head>
<body>
<p class="pos_fixed">This is my first html with css code.</p>
<p>This is my first html with css code.</p>
</body>
</html>
Result
This is my first html with css code.
This is my first html with css code.
Static
.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_static {
position: static;
top: 80px;
right: 40px;
color: green;
}
</style>
</head>
<body>
<p class="pos_static">This is my first html with css code.</p>
<p>This is my first html with css code.</p>
</body>
</html>
Result
This is my first html with css code.
This is my first html with css code.
Relative
.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_relative {
position: relative;
top: 20px;
right: 10px;
color: green;
}
</style>
</head>
<body>
<p class="pos_relative">This is my first html with css code.</p>
<p>This is my first html with css code.</p>
</body>
</html>
Result
This is my first html with css code.
This is my first html with css code.
Absolute
position.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_absolute {
position: absolute;
top: 140px;
right: 50px;
color: green;
}
</style>
</head>
<body>
<p class="pos_absolute">This is my first html with css code.</p>
<p>This is my first html with css code.</p>
</body>
</html>
Result
This is my first html with css code.
This is my first html with css code.
Browser supported
| Properties | |||||
| position | Yes | Yes | Yes | Yes | Yes |
Google Advertisment