位置绝对内绝对
问题描述：
定位元素的行为为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>
答
我明白，你想对整个菜单的背景，所以你应该添加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>