www.webdeveloper.com
Results 1 to 9 of 9

Thread: [RESOLVED] Placing divs over each other

  1. #1
    Join Date
    Apr 2012
    Posts
    38

    resolved [RESOLVED] Placing divs over each other

    Hi,

    I'm building a new webdesign and I need to place one div above the other one.
    I don't do a lot of HTML stuff lately so I'm a bit out of the game.
    Since HTML 5 and CSS 3 I didn't do anything with something like this.

    On the internet I read the position element is no longer recommended by CSS 3 so I was wondering: is there a good way in CSS 3 to do this without using the position element? Or do you guys still recommend me to fix it by using the position element?

    Thanks in advance,

    Casper

  2. #2
    Join Date
    Mar 2011
    Posts
    1,141
    I don't know what you read that made you think that the 'position' property was no longer recommended, but it's simply not true. It is a fundamental CSS property.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2012
    Posts
    38
    Right. I don't know where I've got it from but thanks for the info.
    Since the topic name is still relevant I'd like to ask another question about the same subject.

    I need to place a menu div like "halfway" over the content div. As soon as I use position relative or absolute the div moves to the top left corner.
    Since I need the div to be in a position based on the content div, is there a way to do this properly? I guess if I position the div correctly on my screen it will not be on the same position on a computer where they use another resolution? True or false?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,141
    It's not practical to try to teach you how absolute positioning works here in the forum. It's not that its so terribly complicated, but it does require a basic understanding of how elements are created and positioned in a document. So, rather than try to cram everything into a message on the fly here, I'd suggest that you search on "CSS positioning tutorial". That way you'll find well-thought out instructions that will give you a good foundation and build naturally toward what you're trying to achieve. Absolute positioning is a very useful capability and worth the time and effort to learn how to use it. Good luck!
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    Some references I found
    https://developer.mozilla.org/en-US/...b/CSS/position
    http://reference.sitepoint.com/css/position
    http://www.w3.org/wiki/CSS/Properties/position
    http://www.htmldog.com/reference/css...ties/position/

    CSS position and float properties may not be too intuitive, but it's worth the time to study how they work.

  6. #6
    Join Date
    Apr 2012
    Posts
    38
    Thanks. I was hoping someone could tell me how to get a div positioned on basis of the parent div.
    I will definitely try the links and some tutorials and I'm sure I should be able to figure it out. Thanks for the suggestions!

  7. #7
    Join Date
    Sep 2013
    Posts
    17
    Are we talking about...<div id="menu" style="position:absolute; z-index:2; Top:300px; left:300px;"></div> ?

  8. #8
    Join Date
    Sep 2013
    Posts
    17
    And,
    I can't remember if position:relative works with z-index or not (it's been a while), but if it does, there's putting both divs in a wrapper div (which would then become the parent div of both divs, using position:relative on the 'menu' div and using negative margins to "drag" the menu div over-top of what you're calling presently calling the parent div.

  9. #9
    Join Date
    Apr 2012
    Posts
    38
    It has been resolved but thanks for the input.
    Position relative was enough. I was able to put the div in another place from there with the top and left properties.

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