Using "position: static" for pseudo classes for icon (CSS) -

i trying make hamburger menu, , succeeded accidentally below. i'd know why goes wrong if set position: static, default value of position, #hamburger:before , #hamburger:after.

also, in setting above, shouldn't these 2 show in front , of #hamburger? (so there 3 pieces of bread in row.)

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

here's js bin test.

a element has position:static positioned normal flow of page. in addition this, html elements position:static default. position:static , default value position same value.

the reason why things aren't working because static positioned elements unaffected top, bottom, right , left properties.