如何在固定位置div上使用overflow-y定位粘性標題：scroll

我有一個彈出信息，該信息將在固定尺寸的div上滾動。彈出還需要位置：固定的，因爲它可以出現在任何網站上：如何在固定位置div上使用overflow-y定位粘性標題：scroll

HTML：

<div class="info-box"> 
    <div class="info-box-header"> 
    <a data-val="perfil" class="box-control"> 
    <img class="close-btn" ... /> 
    </a> 

<h3>PERFIL</h3><br><br> 
</div> 

<div class="info-box-content"> 
    <p>Lorem ipsum...</p> 
</div> 

</div>

CSS：

.info-box{ 
    background-color: #0f0; 
    padding: 1em; 
    position: fixed; 
    z-index: 9999; 
    width: 36em; 
    height: 38em; 

    overflow-y: scroll; 
    } 

    .info-box-content{ 
    } 

    .info-box-header{ 
    position: sticky; 
    }

爲了能夠通過內容滾動並總是看到關閉按鈕和標題，我需要的信息框標題是一個粘性標題，所以我試過位置：粘性，但是，似乎溢出y：父母。信息框的滾動doesn'根本不在乎。

僅爲info-box-content類設置overflow-y屬性不起作用。 UPDATE 這可能是因爲此信息框內容類的高度未設置，但需要具有不同內容的類似框。

你會如何處理這個問題？謝謝。

來源

2017-06-01 paranoidhominid

尺寸和溢出添加爲.info-box-content。身高需要調整。爲演示目的設置爲小值。

.info-box{ 
 
    background-color: #0f0; 
 
    padding: 1em; 
 
    position: fixed; 
 
    z-index: 9999; 
 
    width: 22em; 
 
    height: 38em; 
 
} 
 

 
.info-box-content{ 
 
    width: 20em; 
 
    height: 10em; 
 
    overflow-y: scroll; 
 
} 
 

 
.info-box-header{ 
 
    position: sticky; 
 
}

<div class="info-box"> 
 
    <div class="info-box-header"> 
 
    <a data-val="perfil" class="box-control"> 
 
    <img class="close-btn" ... /> 
 
    </a> 
 

 
<h3>PERFIL</h3><br><br> 
 
</div> 
 

 
<div class="info-box-content"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div> 
 

 
</div>

來源

2017-06-01 21:56:22 Gerard

如何在固定位置div上使用overflow-y定位粘性標題：scroll

回答

相關問題