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.
Comments
Post a Comment