如果容器上有溢出滚动，则Z-index在表内不起作用

Question

I'm having a problem positioning an absolute div outside a table, I'm not a big fan of table layout but I found an existing project with a table layout. The code is as follows

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

Where [--C--comp--C--] is the replacement string for an fckEditor that contains an image inside a div, I have set that div's z-index to 10 but it doesn't want to go out of the table.. and its position absolute.

Please let me know what I might be doing wrong.

I've realised that the problem comes with the overflow-scroll on the td container, if you remove the overflow-y:scroll it works fine, but the problem is that I need to have that overflow since there is a lot of content inside that td. I don't know what to do now. :(..someone please help a brother out!

I need the small map to be outside the table and the big map to remain inside the table, it shows the small image when you hover on the big map using Jquery to zoom, which is loaded on the fckeditor. I hope this helps..

Answer 1

For z-index to work correctly, every element that has a z-index property must also have any position set ( egposition:relative ). Also, I'd assign the table a position and z-index for the two to compare.

Answer 2

In saying that you want to absolutely positioned element "to go out of the table", do you mean that you want it to be positioned outside the table, not based on the table's location? Or do you mean you want it located inside the table, but not clipped to the table's borders or overlapped with other content?

If it's the former, I'd suggest moving the absolutely-positioned DIV elsewhere in the code. Why put it inside the table if it's not going to be shown there? It just makes the stacking context and overflow properties harder to work around.

If it's the latter, you might want to adjust or remove the overflow-x and overflow-y properties on the div that contains your absolutely positioned element. It's conceivable that the browser would still apply the overflow clipping rules to child elements, even if they're absolutely positioned.

Also, keep in mind that z-index is only meant to affect the stacking order of sibling elements. Elements that are on the same level of the tree, in other words other elements inside your 500px-height div, will be stacked according to their z-order, but parent and child nodes play by different rules.

If this answer doesn't help, then maybe I'm misunderstanding what you want to do. Can you post a picture of how it's behaving and describe how you'd like it to behave?

I think what you want to do in this case is to get the small map outside of the scroll DIV somehow. Can you change this...

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--comp--C--]
</div>

...to something like this?

[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--compBigMap--C--] <!-- Big map code goes here -->
</div>

If not, could you change the code that's getting inserted so that it creates the small map at a higher level in the code? For example, you can add elements to the root node using document.getElementsByTagName("body")[0].appendChild(element); (there might be a better way than that, just an example). Using that, or something like that, you might be able to put your small map higher up in the document tree, which would prevent it from clipping.