CSS Position

Google 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 Advertisements

We have more than 5 Groups which have 500000+ Members and some Pages have more than 100000+ members. If you want to post your article on our website/FB Group/FB Page please contact on hitesh.xc@gmail.com or 8076671483

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

Path variable is set for providing path for all Java tools like java, javac, javap, javah, jar, appletviewer which are used in java programming. All these tools are available in bin folders so we set path upto bin folders. Difference between path and classpath in Java

Classpath variable is set for providing a path for predefined Java classes which is used in our application. All classes are available in lib/rt.jar so we set classpath upto lib/rt.jar. Difference between path and classpath in Java

Cloud computing is the on demand availability of computer system resources, especially data storage and computing power, without direct active management by the user. Cloud Computing Tutorial

College Projects Related to Java, AWT, C Projects for College, C++ Projects for College, Android Projects. Download Java C C++ Projects

Download Projects

Adsense Advertisements


Buy This ads Space 8076671483

Buy This Ad Space @$120 per Month, Ad Size 300X600 Contact on: hitesh.xc@gmail.com or 8076671483 Try this Keyword C++ Programs