无法在 div 标签外显示溢出的内容答案

【问题标题】：Can't display content outside of div tag with an overflow无法在 div 标签外显示溢出的内容
【发布时间】：2011-11-11 01:47:24
【问题描述】：

我已按照本教程进行操作，并且效果很好： http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

但是我的问题是我连续有 3 个 div 标签，所有标签都带有一个溢出-y 集。当我将鼠标悬停在某些文本上以显示图像时，图像只能在 div 标签内看到并溢出。它需要跨越 div 的宽度（而不是高度）之外的完整尺寸。有什么方法可以在 div 标签之外显示图像。

谢谢 D

好的，这是一个临时代码示例，它只是代码的摘录。我想要做的是当价格悬停时，在 div 标签之外显示内容。

<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>

【问题讨论】：

两者都是自动的 - 如果超过 800 像素，则栏会弹出并且内容不会显示在此溢出 div 区域之外

标签： html css

【解决方案1】：

我认为这与您的溢出设置无关。

只需相对于您悬停的文本绝对定位图像，例如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;
}

【讨论】：

如果我去掉overflow属性那么它允许弹出显示在div之外，所以它必须是overflow设置。

【解决方案2】：

无法在溢出区域之外显示内容； html 剪辑除此之外的所有数据。 w3schools.com/jsref/prop_style_overflow.asp

【讨论】：