我正在開發一個專案（HTML 和 CSS 頁面），其中頁面頂部有一個導航欄，導航欄下方有一個主容器，左側有一個選單。
選單是隱藏的，當我將滑鼠移動到視窗的左邊緣時，它就會出現，并與主容器重疊。
如果我向下滾動頁面，導航欄會滾動，并且選單會向上移動直到到達頂部。然后它停止并保持在這個地方。
我或多或少地做到了。但我仍然有問題。
為了以簡單的方式說明我的專案，我采用了在 css-tricks.com 網站上找到的一些基本代碼，并對其進行了一些修改以顯示我的問題。
這是代碼：
HTML
<h4>Scroll to see the sticky element <em>sticking</em></h4>
<div class="extra"></div>
<br />
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
<br />
<div class="extra"></div>
和 CSS ：
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra,
#wrapper {
display:flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
@media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
在這里，“額外”div 是我的導航欄，主容器是灰色部分，粘性元素是選單。
我想要的是主容器（灰色部分）確實使用了完整的寬度和高度，這意味著其中的文本應該出現在左上角并與粘性 div 重疊。
我找不到實作這一目標的方法。
請問有人可以幫我嗎？
先感謝您。
問候，
uj5u.com熱心網友回復：
<div id="wrapper">
<div id="mask">
<div id="sticky">
sticky
</div>
</div>
<div id=brol>
This part should be overlapped by the sticky element
</div>
</div>
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrapper {
position: relative;
}
uj5u.com熱心網友回復：
我已將 z-index 用于重疊內容：
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0px;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
z-index: 2;
}
.extra,
#wrapper {
width: 75%;
margin: auto;
background-color: #ccc;
z-index:1;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
#brol{
margin-top: -100px;
}
@media (min-height: 768px) {
#wrapper{
height: 2000px;
}
}
uj5u.com熱心網友回復：
// added .sticky-parent
.sticky-parent {
width: 0;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 100px;
height: 100px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
.extra, #wrapper {
display: flex;
width: 75%;
margin: auto;
background-color: #ccc;
}
#wrapper {
height: 800px;
}
.extra {
height: 100px;
}
body {
font-family: georgia;
height: 1000px;
}
h4 {
text-align: center;
}
@media (min-height: 768px) {
#wrapper {
height: 2000px;
}
}
<div class="sticky-parent">
<div id="sticky">
sticky
</div>
</div>
<div id="brol">
This part should be overlapped by the sticky element
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/347719.html