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

Question

I was trying to make a hamburger menu, and succeeded accidentally as below. I'd like to know why it goes wrong if we set position: static, the default value of position, for #hamburger:before and #hamburger:after.

Also, in this setting above, shouldn't these two show in front and back of the #hamburger? (So there would be three pieces of bread in a 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 a JS bin to test.

Answer 1

A element that has position:static is always positioned to the normal flow of a page. In addition to this, all HTML elements are position:static by default. So position:static and the default value for position is the same value.

The reason as to why things aren't working is because all static positioned elements are unaffected by the top, bottom, right and left properties.