CSS Position

Advertisements

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 Advertisment

Buy This Ad Space @$20 per Month, Ad Size 600X200 Contact on: hitesh.xc@gmail.com or 9999595223

Magenet is best Adsense Alternative here we earn $2 for single link, Here we get links ads. Magenet

For Projects 9999595223

Google Advertisements


Buy Websites 9999595223

Buy College Projects with Documentation Contact on whatsapp 9999595223. Contact on: hitesh.xc@gmail.com or 9999595223 Try this Keyword C++ Programs

Advertisements