I have added a sticky header to my homepage, however the sticky header seems to be behind the rest of the content on the page, so when i scroll down the page, images and text are on top of the header, is there a way to stop this?
Here is my code:
<style>/* Reset body padding and margins */body{ margin: 0; padding: 0;}/* Make Header Sticky */#header_container{ background: #827878; border: 1px solid #666; height: 60px; left: 0; position: fixed; width: 100%; top: 0;}#header{ line-height: 60px; margin: 10 auto; width: 940px; text-align: left; font-size: 26px; color: #f5f5f5; line-height: 28px; margin-bottom: 14px; font-family: 'Source Sans Pro',sans-serif;}/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content. */#container{ margin: 0 auto; overflow: auto; padding: 80px 0; width: 940px;}#content{}/* Make Footer Sticky */#footer_container{ background: #eee; border: 1px solid #666; bottom: 0; height: 60px; left: 0; position: fixed; width: 100%;}#footer{ line-height: 60px; margin: 0 auto; width: 940px; text-align: center;}</style><!-- BEGIN: Sticky Header --><div id="header_container"><div id="header"> Header Content</div></div><!-- END: Sticky Header -->