Can't display content outside of div tag with an overflow

I've followed this tutorial and it works fine: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

However my problem is that i have 3 div tag in a row, all with an overflow-y set. When i hover over some text to display an image, the image can only be see inside the div tag with an overflow. It needs to span the full size which is outside the width (not height) of the div. Is there any way the image can display outside of the div tag.

Thanks D

ok here's a make-shift code sample, it's only an excerpt from the code. What i'm trying to do is when the pricing is hovered over, display the content outside the div tag.

<table class="itemOverFlow" border="1px">
    <tr>
        <td width="600px">other stuff here</td>
        <td>
            <div id="miniShoppingCart" class="itemOverFlow">
                <h4>White Chocolate & Peanut Butter</h4>
                <br />1 X Box of 16 Squares at 14.95<br /> <a
                    href="shoppingItem.php?id=45 ">View Item</a><br /> <a
                    class="thumbnailLeft" href="#thumb">Pricing<span>
                        <div class="options">
                            <h3>Purchase options</h3>
                            <form class="addToCartForm" method="post" action="addToCart.php">
                                <input type="hidden" name="returningPage"
                                    value="/ShoppingCart/categoryDisplay.php" />
                                <table class="options">
                                    <tr>
                                        <th>Selection</th>
                                        <th>Price</th>
                                        <th>Quantity</th>
                                        <th></th>
                                    </tr>
                                    <input type="hidden" name="itemId" value="45" />
                                    <tr>
                                        <td>Box of 16 Squares,</td>
                                        <td>14.95</td>
                                        </td>
                                        <input type="hidden" name="0_id" value="0" />
                                        <input type="hidden" name="0_idObj"
                                            value="676862cef66431c20584f6f4b9d7a743" />
                                        <td><select name="0_qty"><option value="1" selected>1</option>
                                                <option value="2">2</option>
                                                <option value="3">3</option>
                                                <option value="4">4</option>
                                                <option value="5">5</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                        </select>
                                        </td>
                                        <td><input type="submit" name="0_addToCart"
                                            value="Change  Add new">

                                        </td>
                                    </tr>
                                </table>
                            </form>

                        </div> </span> </a>
            </div>
            <hr /></td>
    </tr>
</table>

css

<style type="text/css">
div.itemOverFlow {
border: 1pt solid blue;
height: 500px;
overflow: auto;
padding: 20px;}
.thumbnailLeft {
position: relative;
z-index: 0;}
 a.thumbnailLeft {
color: blue;
text-decoration: underline;}
 .thumbnailLeft:hover {
background-color: transparent;
z-index: 50;}
 .thumbnailLeft span {
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;}
 .thumbnailLeft span img {
border-width: 0;
padding: 2px;}
 .thumbnailLeft:hover span {
visibility: visible;
top: 0;
left: -400px;
width: 450px;
height: 350px;}
 </style>

---

I do not think this has anything to do with your overflow setting.

Just position the image absolutely, relative to the text you hover, like in this fiddle example.

CSS:

a {
    position: relative;
}
a img {
    display: none;
}
a:hover img {
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    top: 1.2em;
}

---

there is no way of displaying content outside this overflow area; html clips ALL data outside of this. w3schools.com/jsref/prop_style_overflow.asp

链接地址: http://www.djcxy.com/p/83652.html

上一篇: 100％浏览器宽度Div内小部门

下一篇: 无法显示溢出的div标签以外的内容