使用＆＃34; position：static＆＃34;用于图标的伪类（CSS）

Question

我正试图制作一个汉堡菜单，并且意外地成功如下。如果我们为position: static和position设置#hamburger:before（默认值#hamburger:after），我想知道为什么会出错。

另外，在上面的这个设置中，这两个不应该显示在#hamburger的正面和背面吗？ （所以连续会有三块面包。）

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此处需要JS bin进行测试。

Answer 1

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

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