dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Positioning

  1. #1
    Join Date
    Mar 2011
    Location
    The Pleiades
    Posts
    31

    Positioning

    When you have positioned and image 'absolutely' on your page, how can you make the next element on the page display underneath this, without using multiple break tags?

    I've been searching google but I cannot find the answer!

    Thanks all.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,156
    When you set an element to position:absolute, it is removed from the normal document flow. So you have to explicitly adjust the other elements on the page to make space for the absolute-positioned element. Often, all it takes is adding some margin to the elements directly surrounding it, or set one or more to position:relative and adjust the top and left settings as needed. The key is to remember that the positions of the other elements are not affected by the presence of the absolute-positioned element. Good luck!

  3. #3
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Never ever, ever, ever, ever, ever..... use position:absolute unless there is some dire reason to do so... like the world is ending and that's all you had time to do.... Ahhh no wait... that's still not a good enough reason. Position with CSS.. ALMOST every time.
    About the ONLY reason I can think of is if you need to layer (stack one image on top of another), or z-index a couple images together.
    Now really, it's not that tough to use declared positions like position:absolute, but you better understand how the "Parent Rule" applies!
    From another post:
    Using a declared position like absolute tells and browser to take that element out of the natural flow and do something different with it. So you've got the browser parsing in order from top to bottom, then throwing in some elements that are completely out of the flow.... they can be very hard to control, because there are special rules that apply to elements with declared positions.

    The least under stood of those rules is what I call the "Parent Rule". Giving an element a declared position like relative or absolute can have huge differences in how that element is actually displayed depending on whether or not the PARENT of that element also has a declared position.

    So a div which is position:absolute for example will display one way if it's parent also has a declared position and it will display in a completely different manner if it's parent does NOT have a declared position... to review:

    If a div's parent container DOES NOT also have a declared position, the child <div> will do 1 of 2 things.
    If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.
    If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands.

    So be sure to give a declared position to both the parent and the child <div>.
    Best wishes,
    Eye for Video
    www.cidigitalmedia.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles