Photoshop Question posted in
The official user guide can be found here.

Div is not overlapping div below it – Photoshop

I have two divs where one of them is a navigation menu and the other div under it, these divs are touching each other. The main menu has a sub menu where it papers when you hover of it , this works and it doesn’t move any divs around or anything but it is getting hidden but the div under the main menu how do i fix it?
Html

<div id="mainmenu">
        <ul id="yw2">
            <li><a href="/Photoshop/index.php?r=home">Home</a></li>
            <li><a href="/Photoshop/index.php?r=site/page&amp;view=about">About us</a></li>
            <li><a href="#">Portofoloio</a>
                <ul>
                    <li><a href="#">Photography</a></li>
                    <li><a href="#">Videography</a></li>
                </ul>
            </li>
            <li><a href="/Photoshop/index.php?r=home/#">Wedding Services</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Wedding Packages</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Destination Weddings</a></li>
            <li><a href="/Photoshop/index.php?r=home/#">Contact us</a></li>
        </ul>   </div><!-- mainmenu -->
    <!-- breadcrumbs -->

    <div class="span-19">
        <div id="content">




            <link rel="stylesheet" type="text/css" href="/Photoshop/css/rslides.css" />
            <script src="/Photoshop/scripts/responsiveslides.min.js"></script>

            <script>
                $(function() {
                    $(".rslides").responsiveSlides({
                        speed: 1000,
                        timeout: 3000,
                        pager: true,
                        pause: true
                    });
                });
            </script>
            <ul class="rslides">
                <li>
                    <img class="carousel-item" src="images/upload/index/12769252" alt="Scrolling Image" />          </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/1374403352" alt="Scrolling Image" />            </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/170297090" alt="Scrolling Image" />         </li>
                <li>
                    <img class="carousel-item" src="images/upload/index/62949888" alt="Scrolling Image" />          </li>
            </ul>

CSS

/*mainmenu*/
#mainmenu
{
    text-align: center;
    border-top: 2px solid #addccf;
    border-bottom: 2px solid #addccf;
}

#mainmenu ul
{
    padding:8px 20px 8px 20px;
    margin:0px;
}
/*the primary menu*/
#mainmenu ul li
{
    position: relative;
    display: inline;
}
/*The text of the menu*/
#mainmenu ul li a,
#mainmenu ul li ul li a
{
    color: #454545;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    padding:5px 8px;
}
/*When you hover over*/
#mainmenu ul li a:hover,
#mainmenu ul li.active a
{
    color: #b6e37c;
    text-decoration:none;
}
/*Submenu Css*/
#mainmenu ul li ul{
    display: none;
    position: absolute;
    text-align: center;
    padding:8px 20px 8px 20px;
    border: 2px solid #addccf;
    left: -40px;
    width: 150px;
    margin-top: 15%;
    top: 100%;
    z-index: 1;
}
#mainmenu ul li ul li a{
    display: block;
}
/*Whe users hovers it will show the submenu*/
#mainmenu ul li:hover > ul{
    display: block;
}
/*end of mainmenu*/
.span-19{
    margin-top: 30px;
    text-align: center;
    width: 100%;
}

EDIT: i have recreated the html and css in jsfiddle and it works as intend but in my website it doesn’t? any idea what might be causing it?

Tags:

3

Answers


  1. 0 
    div.thathastopopup {
    z-index:1;
}

    Documentation on z-index on MDN here.

    In short, you can use z-index to put elements that are positioned absolute, relative or fixed over eachother. The default z-index is 0, and stacking order is defined within the direct parent.

    Login or Signup to reply.
  2. 0

    Use the CSS property for z-index. You can think of it like an order for the z dimension. So if you stack things on top of each other, the z-index defines which is above which element. The higher the number, the higher the element. So z-index of 10 will hide anything with a z-index of < 10.

    Login or Signup to reply.
  3. 0

    Don’t forget z-index only works on elements which position property doesn’t equal static (ie. elements with position: absolute, position: relative or (if I’m not mistaken) position: fixed)).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search