网页元素彼此重叠，即使在css中使用百分比值 [英] web page elements overlapping each other even when using percentage values in css
问题描述
我有一个这样的结构的页面。我想把页面分成6个部分，所以我已经做了6外 div 。
I have a page with structure like this. I want to divide the page into 6 sections so I have made 6 outer divs.
<body>
<div id="header">
<img />
</div>
<div id="pageTitle">
title of page
</div>
<div id="section1" class="section">
<div class="section-title">
section 1
</div>
<form>
<input />
</form>
</div>
<div id="section2" class="section">
<div class="section-title">
section 2
</div>
<form>
<input />
</form>
</div>
<div id="section3" class="section">
<div class="section-title">
section 3
</div>
<form>
<input />
</form>
</div>
<div id="nav">
<a href="url" />
</div>
</body>
问题是，当我试图通过使用 Ctrl + 或 中 div 即使当我指定所有属性，如， top ， width code> height left 。
the problem is that when i try to zoom into the page by using Ctrl++ in firefox or chrome the contents of the divs get overlapped on each other even when I am specifying all properties like top,width,height,left in percentages. now because percentages are relative units this should not happen.
#header {
position:absolute;
top:2%;
width:90%;
height:50%;
}
#pageTitle {
position:absolute;
top:30%;
left:20em;
}
.section {
margin:20px;
border:10px;
width:60%;
height:33%;
}
.section-title {
position:absolute;
font-size:1.4em;
left:70%;
margin:10px;
top:10%;
width:60%;
height:15%
}
#section1 {
position:absolute;
top:40%;
}
#section2 {
position:absolute;
top:70%;
}
#section3 {
position:absolute;
top:100%;
}
form {
position:absolute;
top:30%;
height:70%;
}
label {
display:block;
width:75%;
font-size:1em;
}
#nav {
position:absolute;
top:140%;
}
在其他一些页面中， t在缩放到页面时重叠，但像素是绝对单位。
In some other page where I was using pixels instead of percentages the content didn't overlap on zooming into the page but pixels are absolute units. What's wrong?
像素是屏幕上的点，所以当放大时，像素变大了？
Pixels are the dots on the screen so when I zoom in do pixels become bigger?
推荐答案
它的框模型。
边框延伸超过宽度和边框。当你不使用百分比时，更容易看到。
Margin's extend past width and borders. It's easier to see when you're not using percents.
假设你有一个div，它的CSS是：
Say you have a div and it's CSS is:
.myDiv{margin:5px;width:100px;}
110像素宽和110像素高。
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.
我想说摆脱边缘，并尝试使用padding来控制间距。如果你想做背景的东西，你可能需要嵌套一个孩子div在那里，应用背景，而不是获得相同的效果。
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.
您可以查看 W3学校网站，快速而简洁的概述。
You can check out the W3 School site for a quick and dirty overview.
这篇关于网页元素彼此重叠，即使在css中使用百分比值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
