使图像相对于其父容器具有静态位置？答案

【问题标题】：Make an image have a static position relative to its parent container?使图像相对于其父容器具有静态位置？
【发布时间】：2013-05-17 23:56:08
【问题描述】：

我正在制作一个图片预览容器，可以在 页面底部的以下网址找到：

http://cowperthwaite.dev.mybusinessadmin.com/location/51447

在底部，您可以看到缩略图图像有一个滚动条，因为父容器的高度无法容纳。这很好，并且正在按预期工作。

我遇到的问题是我需要左侧的 LARGE 图像始终保持在视图中，即使向下滚动也是如此。换句话说，我需要它相对于其父 div 保持静态 - 始终在黄色框内 - 而缩略图有一个滚动区域。

我尝试了各种position:_______ 变体，但都无济于事，我觉得我在这里错过了一些更高的概念。我也不确定我想要完成的事情是否可能。

有人介意提供一些见解吗？提前致谢

编辑：derp，没有提供我的代码...

HTML：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' id='largeImage' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture) 
            {
                echo "<div class='pBoxSmallImageContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxSmallImage'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

CSS：

.pictureBoxContainer {
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 350px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
    max-height: 300px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxRightColumn {
    display: block;
    float: right;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxSmallImageContainer {
    height: 103px;
    width: 145px;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
    position: relative;
}

.pBoxSmallImage {
    max-height: 95px;
    max-width: 138px;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.pBoxLargeImageContainer {
    width: 100%;

}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
    max-height: 300px;
    position: static;
}

【问题讨论】：

标签： html css image static scroll

【解决方案1】：

将position: relative 添加到pictureBoxContainer div 并将以下样式添加到pBoxLeftColumn div：

.pBoxLeftColumn {
    display: block;
    left: 25px;
    max-width: 49.99%;
    min-width: 49.99%;
    position: absolute;
    top: 25px;
}

【讨论】：

【解决方案2】：

将大的img 放在div 中，将缩略图放在单独的div 中，然后添加overflow-y:auto; 并将div 的缩略图放在height 中。

See demo here.

注意：对于overflow-y:auto;，如果您移除一些拇指使其不超过高度，滚动条将会消失。

【讨论】：

【解决方案3】：

.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
    position:absolute;
    margin-top:0px;
}

我猜这就是你想要的？

【讨论】：