css issue with element in top row hidden under bottom row

Question

I have two sections stacked on top of each other as follows:

///////

Row One <----- I want the dropdown in here to appear over row two

///////

Row Two

///////

The issue is that the bottom of the dropdown is hidden under row 2. If I remove the overflow-y: auto combined with a z-index it makes the whole top section go over the bottom section, however I just want the dropdown to be placed above the bottom section.

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex: 0 1 200px;
  background: red;
}

.row-wrapper {
  overflow-y: auto;
  z-index: 10000;
}

.card {
  position: relative;
  background: white;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: absolute;
  top: 20px;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="row-one">
    <div class="row-wrapper">
      <p>TOP CONTENT</p>
      <div class="card">
        <p>Im a card </p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row-two">
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>

(fiddle)

This question seems very familiar - did you post it before already? — MTCoster, Feb 11 '19 at 16:40
You can check how it is done in Bootstrap and use that solution. Website: https://getbootstrap.com Bootstrap: https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.css — Jakub Muda, Feb 11 '19 at 16:47
In your demo, the blue drop-down section isn't actually hidden under row two. It's just pushing it down the page. — DriveItLikeYouStoleIt, Feb 11 '19 at 16:54
Your display flex looks wrong, would suggest you to do a cleanup of CSS — powercoder23, Feb 11 '19 at 16:54
@MTCoster I did, but I didn't include the jsfiddle so I deleted the last one — peter flanagan, Feb 11 '19 at 17:12
@JakubMuda really? you can't post the whole bootstrap css file as a solution :-D — peter flanagan, Feb 11 '19 at 17:14
@DriveItLikeYouStoleIt it isn't pushing it down, check the jsfiddle — peter flanagan, Feb 11 '19 at 17:14
@peterflanagan I just gave you an idea where to look for a solution. Check `.dropdown` class in that file and see how it's done. If you make a code from scratch it won't be much different from Bootstrap solution :) — Jakub Muda, Feb 11 '19 at 17:18
@JakubMuda I'm not being a keyboard warrior here, but that is of no help to me tbh. Thanks for responding, I do appreciate it, but this just isn't really very helpful — peter flanagan, Feb 11 '19 at 17:19
Why isn’t it helpful? Just because it isn’t a solution you can copy-paste into your code doesn’t mean it won’t help you. And you could have just edited your question — MTCoster, Feb 11 '19 at 17:21
@MTCoster the issue is with the parent containers and the overflow. This is why the dropdown is hidden behind the bottom row. Here is the code for the bootstrap dropdown, what in this css will help the issue I am having? - https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L3063 As I said I am not trying to cause an argument but I don't think this is the issue. Also, I can edit the question next time. I don't think this is such a big issue, as the last one has been deleted. Anyway, I have no interest in being on here arguing with people :-) — peter flanagan, Feb 11 '19 at 17:24
[The first line](https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L3064). — MTCoster, Feb 11 '19 at 17:28
@MTCoster this doesn't solve it in my code as it is already position absolute, the example I have provided is too simplified. I better go back and try and provide a more thorough one , although it is difficult as there is quite a few more elements and css in my actual code — peter flanagan, Feb 11 '19 at 17:33

MTCoster · Answer 1 · 2019-02-11T17:51:13.370

2

Does this solve your problem? I’ve switched the position property of .card and .dropdown making them absolute and relative respectively.

.wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.row-one {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex: 0 1 200px;
  background: red;
}

.row-wrapper {
  overflow-y: auto;
  z-index: 10000;
}

.card {
  position: absolute;
  background: white;
}

.dropdown {
  height: 300px;
  width: 200px;
  background: blue;
  z-index: 2;
  position: relative;
  top: 20 px;
  left: 0;
}

.row-two {
  flex: 1;
  display: flex;
  background: #fff;
  flex-direction: column;
  background: pink;
  height: 100%;
}

<div class="wrapper">
  <div class="row-one">
    <div class="row-wrapper">
      <p>TOP CONTENT</p>
      <div class="card">
        <p>Im a card </p>
        <div class="dropdown">
          <h1>DROPDOWN</h1>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
          <p>item</p>
        </div>
      </div>
    </div>
  </div>

  <div class="row-two">
    <p>...content</p>
    <p>...content</p>
    <p>...content</p>
  </div>
</div>

edited Feb 11 '19 at 17:51

answered Feb 11 '19 at 17:34

MTCoster

5,868
3
28
49

thanks for this @MTCoster, I updated the example which is now closer to the actual code and demonstrates the same issue I am having – peter flanagan Feb 11 '19 at 17:43
@peterflanagan Updated – MTCoster Feb 11 '19 at 17:51
thanks very much for all your help. If I put the cards as position absolute it opens a whole other can of worms :-D god dang css – peter flanagan Feb 11 '19 at 17:57
Gotta love `position` :p – MTCoster Feb 11 '19 at 17:58
1

hahah, I think this will still be helpful, but looks like there is all sorts of madness going on, as when I get them positioned correctly I am still unable to bring over the bottom row in my code. I will give you an upvote anyway, and I should buy that bootstrap guy some flowers and chocolates, I feel bad now for how blunt I was with him :-D – peter flanagan Feb 11 '19 at 18:02
is there any other trick here besides setting everything to position: absolute? the minute I add a `position: relative` to a parent it breaks, and I need to use `position: relative` eventually – peter flanagan Feb 12 '19 at 13:31
1

There are some great answers to this follow-up question [here](https://stackoverflow.com/q/2243245/1813169) – MTCoster Feb 13 '19 at 13:15

css issue with element in top row hidden under bottom row

1 Answers1