z-index and overflow not making div display correctly

Question

I am working on a project where I am displaying messages when the user hovers over a box, I have created a scenario to mock up what I am having issues with.

The blue box should appear as the full 250px as defined and not be clipped to the 200px that the containing div is set to, is there anyway to get round this, I can sit the blue box outside the containing div as its all part of a UserControl that needs to be self contained.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
}

#fourth
{
    width: 250px;
    height: 50px;
    background-color: blue;
    position: absolute;
    z-index: 100;
}

<div id="first">
    <div id="second">
      <div id="fourth">
      test
      </div>      
    </div>
</div>

Remove #first{ overflow: hidden } because that is intended behavior and there is no work around apart from changing CSS/HTML structure — Justinas
– Justinas, Commented May 23, 2017 at 13:12

wired · Accepted Answer · 2017-05-23 13:23:25Z

2

Change:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;

}

To

#first {
width: 200px;
height: 200px;
background-color: green;

}

In other words, remove overflow: hidden and that blue div will appear as you wanted to.

edited May 23, 2017 at 13:23

answered May 23, 2017 at 13:13

wired

4384 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhishek Pandey Over a year ago

This should be a comment, not an answer.

Pete · Accepted Answer · 2017-05-23 13:16:01Z

0

Not entirely sure this is what you are after but all you need to do is change the overflow from hidden to visible on your first div:

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: visible;  /* change this */
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
}

#fourth
{
    width: 250px;
    height: 50px;
    background-color: blue;
    position: absolute;
    z-index: 100;
}

<div id="first">
    <div id="second">
      <div id="fourth">
      test
      </div>      
    </div>
</div>

answered May 23, 2017 at 13:16

Pete

58.8k31 gold badges132 silver badges188 bronze badges

1 Comment

ccStars Over a year ago

This is not what I was fully intending as I was hoping to include the scrollbar still, but there seems to be no work around apart from moving the fourth div outside the first. So I am going to see if I can try positioning the element so it works out where the edge is of the containing div and displays within the containing div

Ozgar · Accepted Answer · 2017-05-23 13:17:59Z

0

As Wired said you have to remove the overflow: hidden; from the #first element. Otherwise all elements inside will be cut off if they should reach outside it's boundaries.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
}

#fourth
{
    width: 250px;
    height: 50px;
    background-color: blue;
    position: relative;
    top: 0;
    left: 0;
    z-index: 100;
}

<div id="first">
    <div id="second">
      <div id="fourth">
      test
      </div>      
    </div>
</div>

answered May 23, 2017 at 13:17

Ozgar

3153 silver badges14 bronze badges

Collectives™ on Stack Overflow

z-index and overflow not making div display correctly

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related