1

I'm trying to overlay some breadcrumbs over a banner image. Rather than use absolute positioning or a similar solution, I'm using a negative margin.

For some reason, the margin of the banner's text is covering up the breadcrumbs, which means that they can't be clicked on or selected.

My assumption was that this was a simple z-index issue, but I can't get z-index to work. No matter where I put it or what values I set it to, the issue persists. From what I can tell, it only happens with display: flex.

Here's a simplified version of the problem:

https://codepen.io/anon/pen/jgMGYj

.small-text
{
  margin-bottom: -20px;
}

.small-text span
{
    background-color: orange;
}

.big-container
{
    display: flex;
    align-items: center;
    background-color: purple;
}

.big-text
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-text span
{
  margin-top: 50px;
  background-color: lime;
}
<div class="small-text">
  <span>I want to select/highlight this.</span>
</div>
<div class="big-container">
  <div class="big-text">
    <span>But this element's margin is covering it up.</span>
  </div>
</div>

What is the reason for this? Is there some z-index rule that I don't understand? Is it a flex bug? Is it possible to fix it without removing display: flex?

Pikamander2
  • 7,332
  • 3
  • 48
  • 69

3 Answers3

1

You need to use position: relative to make z-index behave like you want it to.

.small-text {
  margin-bottom: -20px;
  position: relative;
  z-index: 1;
}

.small-text span {
  background-color: orange;
}

.big-container {
  display: flex;
  align-items: center;
  background-color: purple;
}

.big-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-text span {
  margin-top: 50px;
  background-color: lime;
}
<div class="small-text">
  <span>I want to select/highlight this.</span>
</div>
<div class="big-container">
  <div class="big-text">
    <span>But this element's margin is covering it up.</span>
  </div>
</div>
Pikamander2
  • 7,332
  • 3
  • 48
  • 69
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
  • I considered that, but I was trying to avoid it because it prevents you from interacting with the `big-text`'s content. But come to think of it, you could add `pointer-events: auto` to `big-text span` to counteract that. – Pikamander2 Jul 26 '19 at 05:02
  • Here's an example of that in action: https://codepen.io/anon/pen/zgKEWK So far that seems to be the best workaround solution, but isn't it possible to make the small-text truly overlap the big text? I don't understand what's happening there. – Pikamander2 Jul 26 '19 at 05:04
  • agree, but may be `z-index` can also be used. I have edited the code, just check please. – Nidhin Joseph Jul 26 '19 at 05:08
  • Thanks, looks like `position: relative` does the trick here. – Pikamander2 Jul 26 '19 at 05:16
  • 1
    yes, worth a mention, z-index needs `position: relative` and does not work with `position: static` which is the default. – Nidhin Joseph Jul 26 '19 at 05:18
1

Try this below code: Use position with z-index will work in every time.

.small-text {
  margin-bottom: -20px;
  position: relative;
  z-index: 1;
}
Umapathi
  • 116
  • 10
0
.small-text
{
  margin-bottom: 0;
}

.big-text span
{
  margin-top: 30px;
  background-color: lime;
}

I think I understand what you're asking, if you remove the -20px margin from the small text and reduce the margin-top to 30px you get the same positioning and you can select the orange text.

MailCarrier
  • 59
  • 1
  • 8
  • That would remove the overlapping completely. Remember, the goal is for the small text and its container to be on top of the big text and its container since it's going to be breadcrumbs overlapping a banner image. – Pikamander2 Jul 26 '19 at 04:58
  • Okay, I obviously didn't understand the question, I thought you were trying to select the text and keep them positioned in the same place, my bad – MailCarrier Jul 26 '19 at 05:21
  • No worries, thanks for the help. – Pikamander2 Jul 26 '19 at 05:22