javascript - CSS div (absolute) inside table th (relative), div is hidden

Question

Am a little bit stuck here. I am tryng to create a filter pop-up for a table head. So my first thought was making the th position relative and make the div.filter position absolute. It kinda works... the 'test' part should be shown in front of the rest. But it still is inside the th tag.

Result:

Code:

<th>
// some th stuff
    <div class="filter">
        test
    </div>
</th>

css:

th {
    position: relative;

    .filter {
        position: absolute;
    }
}

So then I thought lets add a index. But I got no result what so ever. Does anyone have a explanation what is going on here? Is there something am doing wrong or is this just not the way it works?

标签： javascriptjquerycss

Answer 1

添加overflow: visible到您的th选择器中，事情应该会按您的预期工作。