我有一個簡單的下拉菜單,右邊有一個粘性容器。下拉菜單一直在粘性容器后面:
我試過了:
將右側容器更改為固定位置 更改兩個div的z索引 位置為絕對的下拉列表是文章-操作-下拉列表-內容 粘性容器是右邊欄容器。
粘性元素:
.right-sidebar-container {
height: 550px;
width: 98%;
background-color: red;
display: block;
margin-left: auto;
margin-right: auto;
top: 20%;
margin-top: 10px;
position: sticky;
margin-bottom: 20px;
transition: 0.5s;
}
絕對元素:
.article-actions-dropdown-content {
position: absolute;
background-color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
min-width: 160px;
overflow: auto;
border: 1px solid #ebebeb;
border-radius: 4px;
opacity: 0;
transition: opacity 0.1s ease-in;
overflow: hidden;
visibility: hidden;
}
嘗試使用類article-actions-drop down-wrapper將z-index: 1添加到元素中。也就是說,
.article-actions-dropdown-wrapper{
z-index: 1
}
在您的codopen上嘗試,下拉菜單嵌套在已經嵌套的包裝中,只需應用z-index:1000;在。文章操作下拉式包裝和z索引:0;開著。右側邊欄容器
z-index用于開始一個嵌套元素的單元計數100或10(不記得了)單元比一個更高的單元少,然后你必須插入更高的數字
你應該把這門課的z指數定為1。文章-動作-下拉菜單-內容,因為它會優先考慮粘性菜單。