Geek Answers Handbook

Web page elements overlap even when using percentage values ​​in css

I have a page with a structure like this. I want to divide the page into 6 sections, so I made 6 external 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>

the problem is that when you try to zoom in on the page using Ctrl++at firefoxor chromecontents divget overlapped with each other, even when I point out all of the properties, such as top, width, height, leftas a percentage. now, since 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%;
}

On another page, where I used pixels instead of percentages, the content did not overlap when the page was scaled, but the pixels are absolute units. What's wrong?

- , , , ?

+5
2

.

. , .

, div, CSS:

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

.myDiv 110 110 .

, , , . , .

, , . , div , .

W3 School .

+1

css, .

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

More articles:


All Articles