Question

我为导航栏创建了一个汉堡图标。外容器固定，内杆位于绝对位置。问题是，当我将top属性应用于外部固定元素时，它会影响内部条形的高度。为什么会这样，我怎么能阻止它呢？

这是我创建的一个小演示：

div{
    position: fixed;
    /*top: 3.4em;  /*uncomment this to see the problem*/ 
    right: 5em;
    height: 2em;
    width: 2em;
    cursor: pointer;
    z-index: 50;
    background-color: #ffffff;
    border: 0.063em solid #ff6633;
    border-radius: 0.313em;
}

span{
    display: block;
    position: absolute;
    height: 0.2em;
    width: 1.5em;
    background-color: #ff6633;
    left: 0.25em;
}

span:nth-child(1){
  top: 0.25em;
}

span:nth-child(2){
  top: 0.863em;
}

span:nth-child(3){
  top: 1.438em;
}

<div>
  <span></span>
  <span></span>
  <span></span>
</div>

https://jsfiddle.net/ezp43625/

Answer 1

这似乎是一个浏览器渲染问题。如果放大或检查高度，它会显示三条线的相同高度。所以可能你可以尝试改变顶部偏移量。

对我而言看起来不错

top: 3.5em

固定元素的顶部属性影响内部绝对定位元素

1 个答案: