css - Are div's even necessary around most elements since there is absolute positioning -

so in past few months i've taught myself web design. of course there's ton more learn, feel have firm grasp on know far. 1 thing i've wondered how necessary div is, when end using absolute positioning. instance wrote following code:

<section id="header-section">         <header class="main-header">             <h1>the voice of jeremy donahue</h1>                 <nav class="main-navigation">                     <ul>                         <li><a href="http://www.thevoiceofjeremydonahue.com/about">about</a></li>                         <li><a href="http://www.thevoiceofjeremydonahue.com/contact">contact</a></li>                     </ul>                 </nav>         </header> </section>  

when read source code on lot of pages seems me things grouped or similar. of course assumption is, designer have artistic license , can arrange page anyway want, while keeping user experience in mind , keeping code semantic.

however, many times end positioning elements using {position: absolute} property , disregarding containing div. thought if have h1 example , plan on positioning i've described, why bother putting in div?, , same other element position such way. why not have them free standing elements? i'm wondering if it's still semantic reasons, or if it's considered best practice group things way. hope i've been clear in way i've described this.

just descriptive can, here css i've applied far particular iteration of page. it's no close finished (obviously), can see couple of absolute positioning i've applied header section.

/*global*/  * {     -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;          -o-box-sizing: border-box;             box-sizing: border-box; }  html {     height: 100%; }  body {     background: rgb(234, 234, 234); }  body, .container {     min-height: 100%; }  .container {     background: white;     margin-top: 6.25em; }  header {     position: absolute;     top: 0.625rem;     background: transparent;     text-align: center;  }  ul {     list-style-type: none; }  {     text-decoration: none; }  /*typography*/  h1 {     font-family: 'parisienne', cursive;     font-size: 2.5rem;     color: #2713e7;     position: relative;     top: 1.25rem;  }  /*lists*/  .main-navigation {     position: relative;     top: 2.5rem; }  .main-navigation li  {     position: absolute;     top: 10px;     display: inline-block;     margin-right: 10%;     font-family: 'atomic age', cursive;     font-size: 1.5625rem;  }  /*borders*/  .main-navigation {     border: 2px solid black; }  .main-navigation li  {     display: inline-block;     border: 2px solid black;   } 

1. in past few months i've taught myself web design.

good job! keep up.

2. however, many times end positioning elements using {position: absolute} property , disregarding containing div.

not good, don't want position element every time canvas. you? position: absolute position element based on it's nearest relatively positioned ancestor, if doesn't have 1 have position according canvas.

3 so thought if have h1 example , plan on positioning i've described, why bother putting in div?, , same other element position such way. why not have them free standing elements?

there many ways skin cat, feel comfortable doing, said. not find many web designers doing type of set up. , positioning each element on page separately, because end adding many, many classes document , big no-no.