- CSS Tutorial
- CSS Code Syntax
- CSS Code Apply
- CSS Fonts
- CSS create Text
- CSS page Background
- CSS Align
- CSS Lists(ol/ul)
- CSS anchor Links
- CSS Selector (id class)
- Css Nesting/Grouping
- CSS Attribute Selector
- CSS Pseudo-element
- CSS Pseudo-Class
- CSS Navigation Bar
- CSS Image Gallery
- CSS Position
- CSS Visible/Display
- CSS Z-index
- CSS Overflow
- CSS Float & clear
- CSS opacity
- CSS Image Opacity
- CSS Cursor
- CSS Code Validation
- CSS Image Sprites
- CSS Media Types
- CSS Page Media
- css page properties
- CSS Quick Learn
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 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.
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.
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.
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.
all css positioning properties.
|position||specifies the type of position for an element|
|top||sets the top margin edge for a positioned box.|
|bottom||sets the bottom margin edge for a positioned box.|
|right||sets the right margin edge for a positioned box.|
|left||sets the left margin edge for an positioned box.|