固定元素內置div與滾動？

我想獲得一個絕對定位的元素，以保持其位置，而有人滾動父div的內容。我已經閱讀了許多有關將定位應用於父div的絕對或相對的問題，但似乎無法獲得滾動div內的絕對定位元素的工作。 div內的內容大於div的高度。如何讓孩子div通過滾動保持其位置？固定元素內置div與滾動？

小提琴：https://jsfiddle.net/724vpsLf/1/

<div id="wrap"> 
    <div id="abs"> 
     Abs Arrow 
    </div> 
</div> 

#wrap { 
    position: fixed: 
    top: 0; 
    left: 0; 
    height: 80%; 
    width: 200px; 
} 
#abs { 
    position: absolute; 
    bottom: 10px; 
    right: 0px; 
    background: #f00; 
    color: #fff; 
}

來源

2016-02-02 wayofthefuture

相反的position: absolute，嘗試position:fixed。 position:absolute將無法使用它的方式。 ;）

CSS + HTML：

#wrap { 
 
     position: fixed: 
 
     top:0; 
 
     left:0; 
 
     height: 80%; 
 
     width: 200px; 
 
    } 
 
    
 
    #abs { 
 
     position: fixed; 
 
     bottom: 10px; 
 
     right: 0px; 
 
     background: #f00; 
 
     color: #fff; 
 
    }

<div id="wrap"> 
 
<div id="abs"> 
 
Abs Arrow 
 
</div> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 
Content<br> 
 

 

 
</div>

希望它能幫助:)

來源

2016-02-02 00:42:27 Evochrome

問題是，使得它相對於窗口，它需要是相對於DIV因爲DIV可以定位在頁面上的多個點。 – wayofthefuture

你這樣的事情之後？

#parent{ 
 
    position: relative; 
 
} 
 
#wrap { 
 
    position:absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color:#EFEFEF; 
 
    overflow:visible; 
 
} 
 
#abs { 
 
    position:fixed; 
 
    top: 20px; 
 
    background: #f00; 
 
    color: #fff; 
 
}

<div id="parent"> 
 
<div id="wrap"> 
 
    <div id="abs">Abs Arrow</div> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
    <p>Content goes here</p> 
 
</div> 
 
</div>

來源

2016-02-02 02:19:45 Trix

我不明白，abs是相對於窗口而不是包裝的。 – wayofthefuture

請您以簡單的文字解釋確切的輸出結果嗎？ – Trix

要相對於其父包裝器或div具有絕對定位的元素。父div將在窗口內具有自己的大小和位置，並且絕對定位的div必須與其相關，而不是窗口，這就是固定定位不起作用的原因。 – wayofthefuture

固定元素內置div與滾動？

回答

相關問題