CSS Absolute positioning

by 7 replies
8
Hi Guys,

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

Thanks
#website design #absolute #css #positioning
  • 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.
    • [ 1 ] Thanks
    • [1] reply
    • I think for fix point, imma use "position:fixed;" right?
      • [1] reply
  • Google: css when to use position absolute
  • 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.
  • 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!
    • [1] reply
    • If you don't pay attention to the last post, you will find bad things happen when viewers resize their browser viewport.

Next Topics on Trending Feed