使圖像相對於其父容器具有靜態位置？

我在做圖像預覽容器，在底部頁面在這個網址找到：使圖像相對於其父容器具有靜態位置？

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

在底部，你可以看到縮略圖得到一個滾動條，因爲有更多的可以放在父容器的高度。這很好，並按預期工作。

我遇到的問題是我需要左側的大圖像始終保持在視圖，即使向下滾動。換句話說，我需要它保持靜態相對於其父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; 
}

來源

2013-05-17 Samuel Stiles

添加position: relative到pictureBoxContainer股利和下面的造型，以pBoxLeftColumn格：

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

來源

2013-05-17 15:54:54 Morpheus

放置在一個div大img和在單獨的div中縮略圖，然後加上overflow-y:auto;並給出縮略圖div a height。

See demo here。

注意：如果您刪除了一些拇指以便它們不超過高度，滾動條將消失，請使用overflow-y:auto;。

來源

2013-05-17 15:54:26 Xareyo

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

我想，這是你想要的嗎？

來源

2013-05-17 15:56:08 Beko1997

使圖像相對於其父容器具有靜態位置？

回答

相關問題