Results 1 to 2 of 2

Thread: here is a dumb question

  1. #1
    Join Date
    Sep 2012

    here is a dumb question

    I'm an HTML newbie. As I understand it, elements appear in the order they are declared, going left to right and down the page, right?

    But say you want one element to appear on top of another. I thought that declaring the position to be 'relative' would cause it to be positioned relative to the element preceding it?

    And for one element to appear on top of another, does the background one have to use absolute positioning?

    Thanks for answers to these questions,

  2. #2
    Join Date
    Mar 2011
    You're on the right track. You're correct that elements normally appear in the order they are declared because they have position:static by default. To stack (or layer) elements, you would generally set all of them to position:absolute, set the z-index on each as desired (to determine which one is on top), and enclose them all in a containing element with it's position set to either 'relative' or 'absolute' and it's width and height set large enough to contain the internal elements.

    What trips up most people are two principles of absolute positioning. The first is that elements set to 'position:absolute' are removed from the normal document flow. That means that the position of the other elements on the page does not change to allow room for elements using position:absolute. The second is that elements using position:absolute are positioned relative to their parent positioned element. That is, the position is based on the nearest parent containing element whose position has been explicitly declared in your stylesheet - or, if there are none, the top of the document.

    From there, layering is just a matter of managing the z-index setting (which only works on positioned elements!). If you search on "CSS positioning tutorial" you'll find some good advice. It may be confusing at first, but you should soon get the hang of it. Good luck!
    Rick Trethewey
    Rainbo Design

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