overflow:hidden is not correctly hiding absolutely positioned elements

Question

I'm creating a dropdown settings box, and inside it I want to be able to have dropdown submenus to group settings. The submenus should slide down, and to do so, I am using jQuery to slide down the div that contains them. However, the absolutely positioned toggles that I have appear immediately, despite the fact that they are outside the div, which is set to overflow: hidden, as can be seen in this image: The toggles appear immediately

This is a sample from my html:

<div id="settings-content" class="hover-content">
  <div class="setting-expandable">
    Panels to display<span class="expand-button pointer">+</span>
    <div class="hide expand-content">
        <label class="pointer">YouTube - LinusTechTips
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.ltt"><span class="toggle"></span>
        </label>
        <br/>
        <label class="pointer">YouTube - TechQuickie
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.tq"><span class="toggle"></span>
        </label>
        <br/>
        <label class="pointer">YouTube - Channel Superfun
            <input type="checkbox" class="display-none setting" data-setting="panel.yt.csf"><span class="toggle"></span>
        </label>
        <br/>
    </div>
  </div>
</div>

and my CSS:

.toggle {
    height: 13px;
    margin: 3px 0;
    position: absolute;
    right: 10px;
    width: 27px;
}
.toggle::after {
    background - color: red;
    content: "";
    height: 13px;
    position: absolute;
    right: 0;
    width: 13px;
    transition: 0.2s linear all;
}
.expand-content {
    margin-left: 10px;
    margin-top:3px;
    overflow:hidden
}
.hover-content {
    position: absolute;
    width: 500px;
    right: 15px;
    background-color: inherit;
    top: -15px;
    border: 2px black solid;
    border-radius: 14px;
    padding: 5px;
    display: block;
}

JS is essentially $("...").click(function(){ $("...").slideUp(); });

If I deliberately position them outside of the content area, and set overflow hidden on each thing in turn, it only hides when it affects the #settings-content container div.

I have made a fiddle for it here: http://jsfiddle.net/S4DSh/1/

I would greatly appreciate some guidance as to how I should fix this because it looks pretty weird at the moment.

Thanks in advance!

@Adam If I set `z-index: -1` it is hidden behind the background colour (I didn't include it in the jsfiddle for simplicity), and it doesn't help anyway. `z-index: 1` makes no difference. — JackW, Jun 26 '14 at 22:55

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

Set it's container to position:relative and overflow:hidden.

.setting-expandable {
    position:relative;
    overflow:hidden;
}

DEMO

You could also just add position:relative; to .expand-content but that looks like it moves the toggles a little bit.

Also see this answer it's basically the same question.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 26 '14 at 23:02

Adam Merrifield

10,307
4
41
58

score 0 · Answer 2 · answered Jun 26 '14 at 22:57

What you want to do is change the z-index for your divs. You should put a lower z-index value on things you want to stay in the back and higher z-index values to what you want in the front. And correct me if I'm wrong but, a value of -1 would be behind the body. You can put any value like 999

#DivInTheBack{
    z-index:12;
}
#DivInTheFront{
    z-index:13;
}

You should take a look at the w3schools reference: http://www.w3schools.com/cssref/pr_pos_z-index.asp

overflow:hidden is not correctly hiding absolutely positioned elements

2 Answers2