绝对位置绝对

Question

将元素定位为absolute的行为似乎已发生变化。

我有

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

然而，before伪元素仅限于ul。并且在ul之外是不可见的。即使position更改为fixed

这似乎是输出

＆＃13;

＆＃13;

div {
    border: 4px solid #525454;

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

}

div ul {
 
	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我知道你想拥有整个菜单的背景，所以你应该将background:linear-gradient(black,yellow,red)添加到div ul

所以，CSS应该改为那样

＆＃13;

＆＃13;

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

div ul
{
	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);
	background:linear-gradient(black,yellow,red)
}

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;