位置絕對內絕對

Question

定位元素的行爲爲absolute似乎已經改變。

我有

<div> // position relative 
<ul> // position absolute 
    ul:before // position absolute 
    <li> // background color on hover 
</ul> 
</div> 

和靜止時，before僞元件，僅限於ul。而且無論如何都不可見。即使position改爲fixed

這似乎輸出

div { 
 
    border: 4px solid #525454; 
 

 
    width: 14em; 
 
\t height: 1em; 
 
\t position: relative; 
 

 
} 
 

 
div ul { 
 
    
 
\t background-color:#fff; 
 
    position:absolute; 
 
    top:110%; 
 
    max-height: 10.68571429rem; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    width: calc(100% + 2px); 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #FFF; 
 
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15); 
 

 

 

 
} 
 
div > ul > li:hover{ 
 
    background-color:beige; 
 
} 
 
div > ul > li { 
 
    cursor: pointer; 
 
    display: block; 
 
     padding:5px 10px; 
 

 
} 
 
div ul::before { 
 
    content: ""; 
 
    position: absolute; 
 

 
    width: 50px; 
 
    height: 102px; 
 
    background: linear-gradient(black, yellow, red); 
 
    top: -21px; 
 
    left: 5px; 
 
    z-index:1; 
 
}

<div> 
 
<ul> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
<li>1</li> 
 
</ul> 
 

 
</div>

Answer 1

我明白，你想對整個菜單的背景，所以你應該添加background:linear-gradient(black,yellow,red)到div ul

所以，CSS應該改爲像

div 
 
{ 
 
\t border:4px solid #525454; 
 
\t width:14em; 
 
\t height:1em; 
 
\t position:relative 
 
} 
 

 
div ul 
 
{ 
 
\t background-color:#fff; 
 
\t position:absolute; 
 
\t top:110%; 
 
\t max-height:10.68571429rem; 
 
\t overflow-x:hidden; 
 
\t overflow-y:auto; 
 
\t width:calc(100% + 2px); 
 
\t margin:0; 
 
\t padding:0; 
 
\t background:#FFF; 
 
\t box-shadow:0 2px 3px 0 rgba(34,36,38,.15); 
 
\t background:linear-gradient(black,yellow,red) 
 
} 
 

 
div > ul > li:hover 
 
{ 
 
\t background-color:#f5f5dc 
 
} 
 

 
div > ul > li 
 
{ 
 
\t cursor:pointer; 
 
\t display:block; 
 
\t padding:5px 10px 
 
}

<div> 
 
    <ul> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
     <li>1</li> 
 
    </ul> 
 
</div>