固定在div中的對象，但相對於JS腳本

Question

我有一個div。我們稱之爲「Main_Card」。 「Main_Card」裏面有一些文字，並有一個圖標，OnClick將這個「Main_Card」和它裏面的所有內容都放在WITH圖標本身中。現在是這個問題。我需要有這個圖標的position: relative;（或絕對的），但我也需要有Main_Card的overflow-y: auto;，文字的原因可能是長一些的屏幕，以便用戶可以滾動它。

這是問題所在。當Main_Card的內容必須滾動時，它會正確滾動文本，但它也會滾動該圖標。但我無法設置圖標的position: fixed;，因爲它也固定在整個頁面上，而不是在Main_Card中。

我能以某種方式設置圖標 「unscrollable」？謝謝，祝你有美好的一天！

Answer 1

我想看到的代碼，因爲這個問題是不是沒有說清楚。

如果我的理解是正確的，只是設置overflow屬性的文字容器。

body, html { 
 
    height: 100% 
 
} 
 
.card { 
 
    position: relative; 
 
    background: orange; 
 
    width: 200px; 
 
    height: 100%; 
 
    
 
} 
 

 
.card-text { 
 
    overflow-y: auto; 
 
    height: 100%; 
 
} 
 

 
.card-icon { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    right: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 25px; 
 
    background: green; 
 
    color: white; 
 
}

<div class="card"> 
 
    <div class="card-icon"> 
 
    </div> 
 
    <p class="card-text"> 
 
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. 
 
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. 
 
    Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. 
 
    
 
    </p> 
 
</div>

Answer 2

元素只使用CSS相對固定於母公司：

div{ 
 
    position:relative; 
 
    overflow-y:auto; 
 
    height:100px; 
 
    width:200px; 
 
    background:#eee; 
 
    margin: 0 auto; 
 
} 
 
div i{ 
 
    position:fixed; 
 
    /*NEVER ASSIGN TOP LEFT RIGHT BOTTOM PROPERTIES! */ 
 
    margin: 10px; 
 
    background: red; 
 
    padding: 20px; 
 
} 
 
div p{height:400px;border:4px dashed blue;} /*just to force scrollbars*/

<div> 
 
    <i></i> 
 
    <p></p> 
 
</div>

位置fixed，一旦你添加一個左，右，上，下將有關視口不是到父元件。
只要你不觸摸這些屬性，你就可以欺騙瀏覽器來滿足你的願望。