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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't get overlay on top of div [z-index]

    Hello!
    I'm the web designer for a system we use here in college, but I'm having a problem which I simply couldn't solve:


    As you can see, there is a black overlay (with a white box which is the overlay content), but the breadcrumb is on top of the overlay. Here is the CSS:

    Breadcrumb:

    Code:
    .navbar { 
        background: #1876a7;
        height: 20px;
        margin-bottom:-13px;
        padding-top: 5px;
        padding-bottom: 3px;
        padding-left: 7px;
        position:relative;
        z-index: 9!important;
        top: 33px;
        color: #fff;
    }
    Black Overlay:

    Code:
    element.style {
    background-color: black !important;
    width: 100% !important;
    height: 100% !important;
    position: fixed;
    left: 0px;
    top: 0px;
    opacity: 0.7;
    z-index: 10 !important;
    display: block;
    }
    Thank you in advance!

  • #2
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Hello,

    Can you provide us a link to the actual website or webpage of this problem? It is ideal to know the quantity of this situation.

    Anyways (based on the given code), you should probably make the breadcrumb an external style sheet and make the Black overlay an internal or inline style component. This will do the cascading effect, making the overlay the priority of the source code.
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Taro View Post
    Hello,

    Can you provide us a link to the actual website or webpage of this problem? It is ideal to know the quantity of this situation.

    Anyways (based on the given code), you should probably make the breadcrumb an external style sheet and make the Black overlay an internal or inline style component. This will do the cascading effect, making the overlay the priority of the source code.
    Hello!

    The page itself is under a restricted area, maybe you can take a look here (without the overlay though): http://www4.univali.br/sophia2

    The breadcrumb is on an external style sheet and the overlay is inline, but the problem still happens :/

    Thanks for the reply!


  •  

    Tags for this Thread

    Posting Permissions

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