8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

CSS Absolute positioning

by TravisO
7 replies
  • WEB DESIGN
    • |
Hi Guys,

Just want to ask if when to use absolute positioning in html/css.

Thanks
#absolute #css #positioning
  • Profile picture of the author Rennell Garrett
    If you want to put something at a fixed point, absolute position is used.

    #mydivid { position:absolute; left:10px; top:10px;
    height:300px; width:180px; background:rgba(255,128,0,0.9); border:1px solid #f80; }

    Try this.
    {{ DiscussionBoard.errors[8145092].message }}
    • Profile picture of the author TravisO
      Originally Posted by Rennell Garrett View Post

      If you want to put something at a fixed point, absolute position is used.

      #mydivid { position:absolute; left:10px; top:10px;
      height:300px; width:180px; background:rgba(255,128,0,0.9); border:1px solid #f80; }

      Try this.
      I think for fix point, imma use "position:fixed;" right?
      {{ DiscussionBoard.errors[8145118].message }}
      • Profile picture of the author Rennell Garrett
        Originally Posted by TravisO View Post

        I think for fix point, imma use "position:fixed;" right?
        The element is positioned relative to its first positioned (not static) ancestor element
        {{ DiscussionBoard.errors[8145143].message }}
  • Profile picture of the author Michael71
    Google: css when to use position absolute
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[8145133].message }}
  • Profile picture of the author PaidAllDay
    Fixed will keep an element in the same place regardless of where you scroll to.

    Usually you see this w/ social buttons that are on the side of an article or maybe a contact or survey button. It's really not used much as it can cover up other elements.

    Most people find position fixed elements to be a distraction.

    Absolute positioning is used to place an element at an exact point relative to it's container, provided that the container is either position relative, or position absolute.

    Absolute positioning is used all of the time to place things in headers and menus (especially dropdowns). As a side note, you should always set a z-index when using absolute positioning to prevent layering issues.
    {{ DiscussionBoard.errors[8202586].message }}
  • Profile picture of the author htmlthis
    Yes, absolute position is used all the time, just be sure that you're not using it for laying out your page structure. You normally use it for positioning elements on top of other elements. For example, slider buttons on top of a slider image and so on.
    When you use absolute position, the element is taken out of the normal flow of the document, so it no longer takes up space. Be sure to use position:relative on the parent div/section and z-index on the absolute positioned element. Cheers!
    Signature

    Convert your PSD to HTML
    Convert your Image to Code
    Convert PSD to HTML
    Web Design Gallery

    {{ DiscussionBoard.errors[8202842].message }}

Trending Topics