CSS Position


Prev Tutorial Next Tutorial

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

propertyDescriptionvalue
bottomIt is used to set the bottom margin edge for a positioned box..auto, length, %, inherit.
clipIt is used to clip an absolutely positioned element.shape, auto, inherit.
cursorIt 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.
leftIt sets a left margin edge for a positioned box. auto, length, %, inherit.
rightIt is used to set a right margin edge for a positioned box.auto, length, %, inherit .
overflowThis property is used to define what happens if content overflow an element's box.auto, hidden, scroll, visible, inherit
positionIt is used to specify the type of positioning for an element.absolute, fixed, relative, static, inherit
topIt is used to set a top margin edge for a positioned box.auto, length, %, inherit
z-indexIt 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
positionYesYesYesYesYes

Prev Tutorial Next Tutorial

Google Advertisements
Download Projects

Google Adsense Advertisements

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements