All geek questions in one place

The absolute position of the div hides my other divs below

Take a look at http://thomaspalumbo.com

I have this CSS for my website container:

.graybox { padding: 0 30px 30px 30px; background: #ededed; position:absolute; left:0; right:0; }

Then I have a container on top of this to center this information. The .graybox container expands the width of the page as I want, but now my footer is hidden, according to Firebug, is this really behind? And on the page?

Is there a fix for this?

While I'm here, someone can explain the blank space on the right side of the page. It takes effect after a smaller page size.

+4
source share
1 answer

You can use the z-index CSS property to make sure the footer is in front of the content. Z-index only works when an item is positioned. So make sure you add position:relative to the footer

 #footer{ position:relative; z-index:999; }

More details: http://www.w3schools.com/cssref/pr_pos_z-index.asp

EDIT

I just checked the code of your site, and I don’t understand why your graybox positioned absolutely, it will only complicate the situation. The same goes for your menu, why is its position absolute, why not just add it in the correct order in the HTML first?

EDIT

If you want to focus your content, but with a background that is 100% wide, you can simply add a div container like this:

HTML

 <div class="container"> <div>lorem ipsum....</div> </div>

CSS

 .container{ background:red; } .container div{ width:400px; margin:0 auto; background:yellow; }

See JSFiddle here: http://jsfiddle.net/HxBnF/

Currently you cannot do this because you have a container that you set to 980px , never do this if you are not sure that you do not need to wrap anything, as in this case the background div in this container .

+2
source

Source: https://habr.com/ru/post/1481555/

More articles:


All Articles