Position relative div1 above position absolute div2 relative to div3

Question

The page content is showing above the absolute dropdown with more options relative to the sticky breadcrumb.

I've tried playing with z-index and positions but the only solution I found was to remove the position relative on the content which isn't an option.

How do I get 'div2' above 'div1'?

EDIT: https://jsfiddle.net/6ncp7f1q/1/

HTML

<div class="container">
  <div class="breadcrumb">
    Home
    <div class="extra">
      <a href="#">TextText</a>
      <a href="#">TextText</a>
    </div>
  </div>
  <div class="content">
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
  </div>
</div>

CSS

.container{
  display: flex;
  flex-direction: column;
}

.breadcrumb{
  position: relative;
  height: 40px;
  width: 100%;
  background-color: pink;
}

.extra{
  position: absolute;
  background-color: red;
  right: 0;
  top: 40px;
}

.extra a {
  display: block;
  width: 100%;
}

.content{
  position: relative;
  width: 100%;
  color: green;
}

If you were to have read the second paragraph I mentioned I did and it didn't work — Wanjia, Sep 11 '18 at 03:53
@Wanjia you want the red links to appear above the content ? — ThS, Sep 11 '18 at 03:56
@UdaraKasun is right, adding `z-index: 1` to `.extra` works, at least editing it in your fiddle it does. Did we get it right, or you're looking for a different result. — rmn, Sep 11 '18 at 07:04
It seems to work here, let me try and recreate my issue where it doesn't work — Wanjia, Sep 11 '18 at 21:49
Possible duplicate of [Why is my z-index being ignored?](https://stackoverflow.com/questions/7814282/why-is-my-z-index-being-ignored) — Wanjia, Sep 23 '18 at 01:48
I found out that position sticky was causing this problem and accidentally typed "relative" instead of sticky while I did not know this was the cause of the problem. I didn't wanted to delete the question as to people might helped by the reference. — Wanjia, Sep 23 '18 at 01:50

score 0 · Answer 1 · answered Sep 11 '18 at 04:24

0

.extra{
  z-index:1;
}

Example here: https://jsfiddle.net/4er5vcop/2/

answered Sep 11 '18 at 04:24

kost

705
7
18

Udara Kasun · Answer 2 · 2018-09-11T07:26:11.533

0

I hope to helpful this

   .extra{
      z-index:1;
    }

here is the result

https://jsfiddle.net/L8mpv79a/

edited Sep 11 '18 at 07:26

answered Sep 11 '18 at 07:12

Udara Kasun

2,182
18
25

score 0 · Answer 3 · answered Sep 11 '18 at 08:14

just set z-index to breadcrumb

.container{
  display: flex;
  flex-direction: column;
}

.breadcrumb{
  position: relative;
  height: 40px;
  width: 100%;
  background-color: pink;
  z-index:99;
}

.extra{
  position: absolute;
  background-color: red;
  right: 0;
  top: 20px;
}

.extra a {
  display: block;
  width: 100%;
}

.content{
  position: relative;
  width: 100%;
  color: green;
}

<div class="container">
  <div class="breadcrumb">
    Home
    <div class="extra">
      <a href="#">TextText</a>
      <a href="#">TextText</a>
    </div>
  </div>

  <div class="content">
    <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
  </div>
</div>

Position relative div1 above position absolute div2 relative to div3

3 Answers3