css - 对图标(CSS)的伪类使用“位置:静态”

我试图做一个汉堡菜单，但意外地成功了，如下所示。我想知道如果将position: static和position的默认值设置为#hamburger:before，为什么会出错。

另外，在上面的此设置中，这两个字符是否不显示在#hamburger:after的前面和后面？ （因此，连续会有三片面包。）

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

最佳答案

具有position：static的元素始终位于页面的正常流程中。除此之外，默认情况下，所有HTML元素均为position：static。
因此position：static和position的默认值是相同的值。

之所以无法使用，是因为所有静态定位的元素都不受top，bottom，right和left属性的影响。

关于css - 对图标(CSS)的伪类使用“位置:静态”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31046779/