0

I am facing a unique problem where i am dropdown menu show under breadcrumb bar for some reason, I tried everything to keep menu on top of breadcrumb. I used z-index property and assigned it to header element, breadcrumb element but it keeps showing on top always,

Below Breadcrumb place holder always shows on top 

<div class="container bc-wrapper bc-wrapper-z-index">
    <div class="row vertical-center">
        <div class="col-sm-6">
            <h2 id="ContentPlaceHolder1_H2PageTitle" class="page-title">News</h2>
        </div>
        <div class="col-sm-6">
            <ul class="breadcrumb">
                <li><a href="http://localhost:55375/">Home</a></li>
                <li><a href="#">Media</a></li>
                <li class="active">News</li>
            </ul>
        </div>
    </div>
</div>

I have placed full code on codepen, I have spend 2-3 days trying to fix this but i have no clue now why it behaves like this

When i remove background color from class bc-wrapper it goes below the image & menu

.bc-wrapper {
    height: 50px;
    z-index: 5;
    margin-top: -25px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    line-height: 50px;
    vertical-align: middle;
}

I am not sure where i am doing wrong?

enter image description here

UPDATE: I have removed most of irrelavent CSS from codepen example, But i cant add that to question as its still long

Learning
  • 19,469
  • 39
  • 180
  • 373
  • 1
    You should provide a [mcve] **within** the question. A codepen, or similar, is good, though no one should have to parse through all that code to help you out. – Asons Feb 24 '19 at 08:52
  • I am not sure what you see in your browser but i can see same result in FF, Chrome , yes due to different width dropmenu may show at different position. – Learning Feb 24 '19 at 08:58
  • My codepen showed _hamburger menu_, so that's okay. Now the rest of my comments apply. – Asons Feb 24 '19 at 09:03
  • I hate playing with z-index on those situations:) would like a js solution ? – Alen.Toma Feb 24 '19 at 09:13
  • @Alen.Toma, I already used JS for mobile version of menu as breadcrumb bar also showed on top in that case, that was easy to manage with JS, In desktop if i use that then part of BC shoes under red color when dropdown is active.. – Learning Feb 24 '19 at 09:30
  • using js make the position:fixed of the dropdown then calculate the left and top dynamicly on mousover. with that you will care less about other elements z-index :) – Alen.Toma Feb 24 '19 at 09:37
  • @Alen.Toma Why to add all that workload and maintenance issues when not needed ? – Asons Feb 24 '19 at 09:39
  • @Learning: improve your answer by also give the relevant CSS for your header and menu bar elements, since those two interact with each other. – Mouser Feb 24 '19 at 10:02
  • @Learning Well, with js solution it will be much easier to maintain future changes, then when you have z-index etc. thats what i think anyway. You already have answer about how to fix them with css. And they gave you the same answer with position:static :) the problem with that solution is that you have position:static to the whole header. it will make some problems in mobile apps:) – Alen.Toma Feb 24 '19 at 10:25
  • @Alen.Toma How can a few properly used CSS properties be less maintainable than a script, given that this is exactly what CSS is for? – Asons Feb 24 '19 at 10:30

1 Answers1

-1

The problem lays with stacking (organising the elements on the z-axis).

Since the header-element is has position relative and its z-index is lower than your breadcrumb bar, a higher z-index to any child of the header is only relevant for elements within the header. The solution is to get the list (menu) out of the context of the header and put it in the same context as the breadcrumb bar so its z-index is actually higher.

enter image description here

Change the position to static on your header-element and set z-index to a minimum 9 on the dropdrop-menu is just one of the ways of solving this.

.non-homepage{
    min-height: 200px;
    position: static; /*instead of relative*/
    background-image: url('/images/bg/bg1_L3.jpg');
    background-position: bottom;
}

NOTE
If you look at your codepen you see a lot of redundant CSS rules set. This will make debugging very hard since a lot of those rules will interact with each other. Less is more. My advice would be to all web site designers to limit the amount of CSS to the absolute necessary to style your page

Mouser
  • 13,132
  • 3
  • 28
  • 54
  • 1
    I can see `position:static` did the trick and it seems to work fine. Not sure why your anser has been marked as `-1` – Learning Feb 24 '19 at 09:59
  • 1
    @Learning Changing to `position: static` happens to solve the issue, though is not the real issue here, stacking context is, and with that, the explanation here is wrong. – Asons Feb 24 '19 at 10:51
  • @LGSon: `position: static` is just one way of solving this issue. I'm explaining about stacking in the way that the header is positioned relative and by doing that has his own context which is lower on z-axis than the bread crumb bar, or am I incorrect? Would like to improve the answer to be correct. – Mouser Feb 24 '19 at 15:50
  • I recommend you simply delete this answer and vote to close as a dupe of this post: https://stackoverflow.com/questions/16057361/how-to-make-child-element-upper-than-parent-with-z-index ...and the reason I think so is, that the OP haven't provided with a properly formatted question (they completely fail to reproduce the issue described within the question) and therefore this answer is unrelated to the question. It can be through the codepen, though as soon as that resource dies or changes, so does this post. – Asons Feb 24 '19 at 17:45
  • @LGSon, Could you give details of solution you have as i tried different thing and nothing worked and user who suggested that i should use `position:static` worked for me. You have been criticizing every one also few even deleted their answer, why dont you give full explanation in a solution, i am not an expert in css and tried hard to fix it myself and then only i came to seek help on stack forum and rather than helping you seem to be criticizing without giving solution, you may be correct and i eager to learn if you tell me what the mistake is and how to solve this professional way. – Learning Feb 25 '19 at 07:19
  • @Learning Saw your comment, too busy at work now so will respond later. – Asons Feb 27 '19 at 11:41
  • @LGSon, I am in no hurry and would like to know what is wring with the code and why `position:static` is not right solution. Feel free to replay when you have time.. – Learning Feb 28 '19 at 12:28