css positioning

the css position properties is used to position an element.

you can specify an element's position in four ways by specifying the position property and one of following values.

it used to create better webpage layout.

there are four different positioning methods-

  • static positioning.
  • relative positioning.
  • fixed positioning.
  • absolute positioning.

positions an images in web page - element position

css Position css static position

css position


Css static positioning

html elements are positioned static by default, but element occurs in the normal flow.

the properties top, right, bottom,  left,and z-index  are ignored for static boxes.

           <style  type= "text/css">
           
                    p { border:1px solid lime;
           
                    width:100px;    height:100px;
           
                    background-color:pink;
           
                    position:static;  }
           
           </style>

Css relative positioning

relative positioning is used to move an element from its normal position - where it would normally be rendered to a new position.

the new position is relative to the normal position of the element.

you can sometimes use the element's margin to achieve the same effect.

           <style type= "text/css"}
           
           p { border:1px solid lime;
           
                    width:100px;height:100px;
                    
                    background-color:pink;
                    
                    position:relative;
                    
                    left:-10px;
                    
                    top:50px;}
                    
           </style>

Css absolute positioning

the value absolute generates an absolutely positioned box that's positioned relative to its containing block.the position can be specified using one or more of the properties top, right, bottom, and left.

absolutely positioned boxes are removed form the flow and have no effect on later siblings.

margins on absolutely positioned boxes never collapse with margins on orther boxes.

the absolutely positioned elements can overlap other elements.

           <style  type= "text/css"}
           
           p { border:1px solid lime;
           
                    width:100px; height:100px;
           
                    background-color:pink;
                    
                    position:absolute;
                    
                    left:200px;
                    
                     top:150px;}
                     
           </style>

Css fixed positioning

the fixed positioning is similar to absolute positioning in that the element is positioned relative to the viewport.

however fixed positioning causes the element to be fixed in the viewport -it will not scroll

when the document is scrolled.the fixed positioned elements can overlap other elements.

<style  type= "text/css"}
           
            p{border:1px solid lime;
            
                  width:100px;height:100px;
                  
                  background-color:pink;
                  
                  position:fixed;
                  
                  left:200px;
                  
                  top:150px;}
                  
           </style>

all css positioning properties.

propertydescriptionvalues
positionspecifies the type of position for an element

static

relative

absolute

fixed

inherit

topsets the top margin edge for a positioned box.

auto

%

length

inherit

bottomsets the bottom margin edge for a positioned box.

auto

%

length

inherit

rightsets the right margin edge for a positioned box.

auto

%

length

inherit

leftsets the left margin edge for an positioned box.

auto

%

length

inherit