Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts

    postition problems

    im trying to get generic position for these divs i have
    i dont care where it is on the page, but i want all of these divs to have top:0px; and left:0px; in the same spot so i try to set this and i try all of the position values: static, absolute, fixed, relative and inherit.
    absolute and fixed break the positioning in a way i do not want. each div i am working on has a "shadow div" and the whole point of all of this is to get each yellow div on top of its red "shadow div". absolute and fixed make this impossible i think.
    static, inherit and relative do not change the top:0px; left 0px; spot
    any ideas guys?
    http://patrickallardcomputerwhiz.com/pacw2/
    Last edited by chopficaro; 04-07-2013 at 11:11 PM.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    To position divs on top of one another give each position:absolute and wrap them all in another div with position:relative
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by chopficaro View Post
    any ideas guys?
    When you use css positioning or float you need to keep in mind that you are taking elements out of their normal page flow.

    You can create a simple shadow div like this:

    Code:
            <style type="text/css">
                #wrapper{
                    position: relative;
                    margin: 30px 0px 0px 100px;
                    width: 200px;
                }
                #shadow{
                    position: absolute;
                    width: 100%;
                    height: 250px;
                    top: 20px;
                    left: 20px;
                    background-color: grey;
                }
                #div1{
                    position: absolute;
                    width: 100%;
                    height: 250px;
                    top: 0px;
                    left: 0px;
                    background-color: red;
                }
            </style>
    Code:
    <div id="wrapper">
                <div id="shadow"></div>
                <div id="div1"></div>
            </div>

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    77
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that worked nicely tyvm!

  • #5
    Banned
    Join Date
    Mar 2013
    Posts
    139
    Thanks
    0
    Thanked 9 Times in 9 Posts
    no problem and if you know your way around a decent image editing application you could create a nice shadow image that you could use as the bg in the shadow div that looks far more natural than the "plastic" shadow using just css.


  •  

    Posting Permissions

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