Css Position On Web Pages

css position:

css position plays a great roal  in for content of website or web page. Suppose you want to write a letter on your web page.  For this you must need to take help from css position.

How to css position: In css Position property is used to make position of content. This property has some value. The valus are absolute ,fixed ,relative, inherit. Different value work in different types. Before

Fixed css position:

This position will not move though the mouse scorled.

Syntax:

selector

{position:fixed;

top:250px;

right:40px;}

Example:

<html>

<head>

<style type="text/css">

p.fixed

{position:fixed;

top:250px;

right:40px;}

</style>

</head>

<body>

<p>There are four words.</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

<p>This is a text</p><p>This is a text</p><p>This is a text</p>

</body>

</html>

Output:css position fixed

Relative css position:

Relative position element is positioned relative to its normal position.

Syntax:

selector

{position:relative;

left:-40px;}
 selector

{position:relative;

left:40px;}

The -40 indicates the browser that it gonna back from its start position.

Example:

<html>

<head>

<style type="text/css">

#pos_left

{position:relative;

left:-40px;}

 #pos_right

{position:relative;

left:40px;}

</style>

</head>

<body>

<h2>This heading contains no position</h2>

<h2 ID="pos_left">This heading is moved left from its normal position</h2>

<h2 Id="pos_right">This heading is moved right from its normal position</h2>

</body>

</html>

Output:css position relative

Absolute css position:

By the help of absolute positioning you can put your content on any place of your web browser.

Syntax:

selector

{position:absolute;

left:120px;

top:100px;}

Example:

<html>

<head>

<style type="text/css">

h2

{position:absolute;

left:120px;

top:100px;}

</style>

</head>

<body>

<h2>This is a heading with an absolute position</h2>

</body>

</html>

Output:  css position absolute

This is the all in all about css position property. You can learn more about css position from css position article of w3schools.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.