Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Positioning

    • 0
    • 3
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 1.40k
    Comment on it

    As I am a fresher to web design, I don't know exactly all the concepts of positioning and their differences. But as much i have studied the CSS Positioning, I can explain it here as far as my knowledge.

    Positioning is used to get the blocks exactly where you want them to go. The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the properties like top, bottom, left, right. There are basically four types of positioning:

    Static: This is the default positioning for every html element. Static means the element will flow into the page as it normally does. A static positioned element is always positioned according to the normal flow of the page. The elements of static positioning are not affected by the top, bottom, left and right properties.

    Relative: Relative positioning means "relative to itself". The content of relatively positioned elements can move and overlap other elements, but the reserved space for the element is still preserved in the normal flow. A relative positioned element is positioned relative to its normal position.

    Absolute: This is very important positioning that allows you to place any html element exactly where you want it. An element with this type of positioning is not affected by other elements and it also doesn't affect other elements. Absolutely positioned elements can overlap other elements. Here the element is positioned relative to first parent element that has a position other than static. If no such element is found, the containing block inherits the html tag. You can use the left, right, top and bottom properties to move the element anywhere on the page.

    Fixed: A fixed position element is positioned relative to the browser window itself or the viewport. The viewport doesn't change even when the window is scrolled, so an element with fixed positioning will stay exactly where it is when the page is scrolled. Fixed positioned elements can overlap other elements.

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: