div在位置後消失：相對

我試圖在容器內將圖像定位到右側。但是，在將我的父容器設置爲position: relative;後，我的圖像消失了。有任何想法嗎？網站：http://andrewgu12.kodingen.com/。謝謝！div在位置後消失：相對

CSS：

.slide { 
    padding-top: 138px; 
    background-attachment: fixed; 
    width: 100%; 
    height: 100%; 
    position: relative; 
     box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3); 
} 
div#inner-container { 
    text-align: left; 
    width: 960px; 
    margin: 0 auto; 
    padding: 0; 
    white-space: normal; 
    position: relative; 
} 
div#name { 
    right: 0; 
    bottom: 200px; 
    position: absolute; 
}

HTML：

<div class="slide" id="home" data-slide="1" data-stellar-background-ratio="1"> 
     <div id="inner-container"> 
      <div id="name" clas="row"> 
       <img src="images/names.png"> 
      </div>        
     </div>    
    </div>

來源

2013-07-29 Andrew

我認爲它與名稱div的絕對位置有關。 – nocturns2

我將該位置設置爲絕對位置，以便它停留在綠色塊正上方的頁面底部。 – Andrew

它不會消失，它只是一路攀升，並走出顯示屏xD你必須記住，當您使用position: absolute時，對象將查找具有的父項來定位自己。當您將position: relative添加到div#inner-container時，它會更改div#name.row參考。也許將height: 100%;添加到父項div可能會爲你想要的做什麼？

來源

2013-07-29 08:24:56 Derik

這樣做，謝謝！你能解釋爲什麼我必須增加高度：100％嗎？ – Andrew

'position：absolute'是相對於最近的'position：relative' parent。 'div'沒有高度，所以它沒有底部，底部是在頁面的頂部。使用'height：100％'實際上使得'div'與內容高度相同。 – Derik

不爲我做這個詭計。每當我滾動到結尾或頂部時，絕對位置都會被移除。 –

試試這個：

div#name { 
    position:fixed; 
    right: 0px; 
    bottom: 200px; 

}

來源

2013-07-29 07:28:18

有什麼辦法可以將'div＃name'設置爲浮動到'＃inner-container'而不是'#container'的右邊？ – Andrew

檢查此：http://jsfiddle.net/KgD5H/3/ –

位置：固定在這裏是一個可愛的替代 –

div在位置後消失：相對

回答

相關問題