Home > DeveloperSection > Blogs > Positioning in CSS3

Positioning in CSS3


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 1744  View(s)
Rate this:

Positioning in CSS3

The position property gives the elements in different types of positioning, position have five types of property:

1.       Position

2.        Top

3.       Right

4.       Bottom

5.       Left

Above property have some values these are given below:

1.       Position

a.      Static

It is default value of position. Here is elements render in order, as they appear in the document flow.

b.      Relative

The element is positioned relative to its normal position.

c.       Absolute

 The element is positioned relative to its first positioned (not static) forbear element.

d.      Fixed

The element is positioned relative to the browser window.

2.       Top

a.      <length> here given the value in pixels (top: 10px)

b.      <Percentage> here given the value in percentage (top: 10%)

3.       Right

a.      <length> here given the value in pixels (right : 10px)

b.      <Percentage> here given the value in percentage (right: 10%)

4.       Bottom

a.       <length> here given the value in pixels (bottom : 10px)

b.      <Percentage> here given the value in percentage (bottom: 10%)

5.       Left

a.      <length> here given the value in pixels (left: 10%)

b.      <Percentage> here given the value in percentage (left: 10%)

Position Examples:
CSS Code:

<style type="text/css">

#SecondDiv

{

width:70px;

height:70px;

background-color: #CD853F;

left:30px;

top:50px;

position: <!--Enter your desired position-->

}

#FirstDiv

{

width:150px;

height:150px;

border: 2px solid #E5E5E5;

}

</style>

Positions:

position:static;

position:relative;

position:absolute;

position:fixed;

Body Code:

<body>

<div id="FirstDiv">

        <div id="SecondDiv">

               This is second div

        </div>

      

</div>

</body>

Output:

Don't want to miss updates? Please click the below button!

Follow MindStick