Вы можете попробовать этот код CSS, чтобы исправить это
я есть страница с такой структурой. Я хочу разделить страницу на 6 разделов, чтобы я сделал 6 внешних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++ вfirefox или жеchrome содержаниеdivs накладываются друг на друга, даже когда я указываю все свойства, какtop,width,height,left в процентах. теперь, потому что проценты являются относительными единицами, этого не должно происходить.
#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%;
}
На другой странице, где я использовал пиксели вместо процентов, содержимое не перекрывалось при увеличении страницы, но пиксели - это абсолютные единицы. В чем дело?
Пиксели - это точки на экране, поэтому, когда я увеличиваю изображение, пиксели становятся больше?