使用 "position: static" 作为伪 类 作为图标 (CSS)

Question

我想做一个汉堡包菜单，意外成功如下。我想知道为什么如果我们设置 position: static，position 的默认值，#hamburger:before 和 #hamburger:after，为什么会出错。

还有，上面这个设置，这两个不应该出现在#hamburger的前后吗？ （这样一排就会有三片面包。）

#hamburger, #hamburger:before, #hamburger:after {
 position: absolute; /* here! */
 display: block;
 width: 35px;
 height: 5px;
 background-color: red;
 border-radius: 1px;
 content: ''; 
}

#hamburger:before {
 top: -10px;
}

#hamburger:after {
 bottom: -10px;
}

<div id="hamburger"></div> 

这里有一个 JS bin 来测试。

Answer 1

具有 position:static 的元素始终定位到页面的正常流动。除此之外，所有 HTML 元素默认都是 position:static。 所以 position:static 和位置的默认值是相同的值。

事情不起作用的原因是因为所有静态定位元素都不受顶部、底部、右侧和左侧属性的影响。