Question

我有一个菜单，其中的png img为::before伪元素，而不是紧贴菜单项，而是放在顶部。

const menu_button = $('img');
const menu_nav = $('#myNav');

menu_button.click(function(){
  menu_nav.toggleClass('menu_open')
});

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #d6cece;
  overflow-y: auto;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  margin-top: 50px;
}

.overlay a {
  padding-left: 30px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-size: 27px;
  display: block;
  transition: 0.3s;
  font-style: italic;
  color: black;
}

.overlay-content a:before {
  width: 6px;
  content: " ";
  background-image: url(https://picsum.photos/5);
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 18px;
  height: 20px;
}

.menu_open {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/100">

<div id="myNav" class="overlay">
  <div class="overlay-content">
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
  </div>
</div>

为什么这种行为？它在没有菜单的情况下有效，但是在元素垂直对齐时则无效。请查看我快速制作的代码段。

Answer 1

可能应该是这样的

.overlay-content > a:before { 
    content: "";
    display: block;
    background: url("https://picsum.photos/5") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

，然后将其更改为

.overlay-content a:before {
  width: 6px;
  content: " ";
  background-image: url(https://picsum.photos/5);
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 18px;
  height: 20px;
}

Answer 2

因为所有元素都将top设置为18px，所以这些元素“排在最前面”。

如果正确设置了绝对定位的定位上下文（一个元素而不是overlay-content div），那将不是问题。

您应该将定位上下文设置为a元素本身：

.overlay a { 
  position: relative;
}

为什么:: before伪元素在移动菜单上位于顶部？

2 个答案: