Search code examples
cssoverlapping

Is there any way I could overlap another css?

Is there any way I could overlap another css?! For example, I have my search bar on top of the shopping cart and if I hover over the Search bar on accident then my shopping cart disappears since it's the top layer/ first layer. Here's an image. Is there a way to fix this in CSS where the shopping cart is the first layer not second? Thanks in advance!

enter image description here

Solution

  • its basically a z-index Problem

    you should give z-index greater value to your shopping cart css and less z-index value to your search box div

    The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

    HTML

    <div class="a"></div>
   <div class="b"></div>

    CSS

    .a {
    background:red;
    width:100px;
    height:50px;
    z-index:2;
        position:relative;    

}

.b {
    background:green;
    height: 50px;
    left: 20px;
    position: relative;
    top: -30px;
    width: 100px;
    z-index: 3;
}

    DEMO