web page elements overlapping each other even when using percentage values in css

Question

I have a page with structure like this. I want to divide the page into 6 sections so I have made 6 outer divs.

        
                      

              相关标签:
       
      

Answer 1

Its the box model.

Margin's extend past width and borders. It's easier to see when you're not using percents.

Say you have a div and it's CSS is:

.myDiv{margin:5px;width:100px;}

In reality on the page, your .myDiv is 110px wide and 110px high.

Since you're using absolute positioning, the browser is overlapping because it's putting things exactly where you told it to. Hopefully that makes sense.

I'd say get rid of the margin's and try using padding instead to control the spacing. If you're trying to do stuff with backgrounds, you might have to nest a child div in there and apply the background to that instead to get the same effect.

You can check out the W3 School site for a quick and dirty overview.

Answer 2

You can try this css code to fix that

section{
    position: relative;
    height: 100%;
}