當某些動態元素需要絕對定位時，避免重疊內容

Question

這裏的codepen上有一個整潔的響應式組織結構圖佈局：http://codepen.io/siiron/pen/aLkdE它使用絕對定位模仿舊式組織結構圖的效果。但是，它非常依賴絕對定位元素，以使框出現在正確的位置。

當您嘗試將其放到您自己的文檔流中時，會出現問題，並與其下面的內容重疊。很顯然，由於它的設計具有響應能力，因此無法預測內容的多大程度以及我想要實現的方式，因此箱子的內容將是動態的 - 因此添加一個固定高度的div div wrap似乎不是一種選擇。

我添加了一個小提琴來演示該問題：http://jsfiddle.net/yvjG4/

<style> 
*{ 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    position: relative; 
} 

.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
} 

/* Generic styling */ 

body{ 
    background: #F5EEC9;  
} 

.content{ 
    width: 100%; 
    max-width: 1142px; 
    margin: 0 auto; 
    padding: 0 20px; 
} 

a:focus{ 
    outline: 2px dashed #f7f7f7; 
} 

@media all and (max-width: 767px){ 
    .content{ 
     padding: 0 20px; 
    } 
} 

ul{ 
    padding: 0; 
    margin: 0; 
    list-style: none;  
} 

ul a{ 
    display: block; 
    background: #ccc; 
    border: 4px solid #fff; 
    text-align: center; 
    overflow: hidden; 
    font-size: .7em; 
    text-decoration: none; 
    font-weight: bold; 
    color: #333; 
    height: 70px; 
    margin-bottom: -26px; 
    box-shadow: 4px 4px 9px -4px rgba(0,0,0,0.4); 
    -webkit-transition: all linear .1s; 
    -moz-transition: all linear .1s; 
    transition: all linear .1s; 
} 


@media all and (max-width: 767px){ 
    ul a{ 
     font-size: 1em; 
    } 
} 


ul a span{ 
    top: 50%; 
    margin-top: -0.7em; 
    display: block; 
} 

/* 

*/ 

.administration > li > a{ 
    margin-bottom: 25px; 
} 

.director > li > a{ 
    width: 50%; 
    margin: 0 auto 0px auto; 
} 

.subdirector:after{ 
    content: ""; 
    display: block; 
    width: 0; 
    height: 130px; 
    background: red; 
    border-left: 4px solid #fff; 
    left: 45.45%; 
    position: relative; 
} 

.subdirector, 
.departments{ 
    position: absolute; 
    width: 100%; 
} 

.subdirector > li:first-child, 
.departments > li:first-child{ 
    width: 18.59894921190893%; 
    height: 64px; 
    margin: 0 auto 92px auto;  
    padding-top: 25px; 
    border-bottom: 4px solid white; 
    z-index: 1; 
} 

.subdirector > li:first-child{ 
    float: right; 
    right: 27.2%; 
    border-left: 4px solid white; 
} 

.departments > li:first-child{ 
    float: left; 
    left: 27.2%; 
    border-right: 4px solid white; 
} 

.subdirector > li:first-child a, 
.departments > li:first-child a{ 
    width: 100%; 
} 

.subdirector > li:first-child a{  
    left: 25px; 
} 

@media all and (max-width: 767px){ 
    .subdirector > li:first-child, 
    .departments > li:first-child{ 
     width: 40%; 
    } 

    .subdirector > li:first-child{ 
     right: 10%; 
     margin-right: 2px; 
    } 

    .subdirector:after{ 
     left: 49.8%; 
    } 

    .departments > li:first-child{ 
     left: 10%; 
     margin-left: 2px; 
    } 
} 


.departments > li:first-child a{ 
    right: 25px; 
} 

.department:first-child, 
.departments li:nth-child(2){ 
    margin-left: 0; 
    clear: left;  
} 

.departments:after{ 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 81.1%; 
    height: 22px; 
    border-top: 4px solid #fff; 
    border-right: 4px solid #fff; 
    border-left: 4px solid #fff; 
    margin: 0 auto; 
    top: 130px; 
    left: 9.1% 
} 

@media all and (max-width: 767px){ 
    .departments:after{ 
     border-right: none; 
     left: 0; 
     width: 49.8%; 
    } 
} 

.department:before{ 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 0; 
    height: 22px; 
    border-left: 4px solid white; 
    z-index: 1; 
    top: -22px; 
    left: 50%; 
    margin-left: -4px; 
} 

.department:first-child:before, 
.department:last-child:before{ 
    border:none; 
} 

.department{ 
    border-left: 4px solid #fff; 
    width: 18.59894921190893%; 
    float: left; 
    margin-left: 1.751313485113835%; 
    margin-bottom: 60px; 
} 

.lt-ie8 .department{ 
    width: 18.25%; 
} 

@media all and (max-width: 767px){ 
    .department{ 
     float: none; 
     width: 100%; 
     margin-left: 0; 
    } 

    .department:before{ 
     content: ""; 
     display: block; 
     position: absolute; 
     width: 0; 
     height: 60px; 
     border-left: 4px solid white; 
     z-index: 1; 
     top: -60px; 
     left: 0%; 
     margin-left: -4px; 
    } 

    .department:nth-child(2):before{ 
     display: none; 
    } 
} 

.department > a{ 
    margin: 0 0 -26px -4px; 
    z-index: 1; 
} 

.department > a:hover{ 
    height: 80px; 
} 

.department > ul{ 
    margin-top: 0px; 
    margin-bottom: 0px; 
} 

.department li{ 
    padding-left: 25px; 
    border-bottom: 4px solid #fff; 
    height: 80px; 
} 

.department li a{ 
    background: #fff; 
    top: 48px; 
    position: absolute; 
    z-index: 1; 
    width: 90%; 
    height: 60px; 
    vertical-align: middle; 
    right: -1px; 
    background-image: -moz-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%) !important; 
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0)))!important; 
    background-image: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important; 
    background-image: -o-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important; 
    background-image: -ms-linear-gradient(-45deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important; 
    background-image: linear-gradient(135deg, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%)!important; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40000000', endColorstr='#00000000',GradientType=1); 
} 

.department li a:hover{ 
    box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1); 
    height: 80px; 
    width: 95%; 
    top: 39px; 
    background-image: none!important; 
} 

/* Department/ section colors */ 
.department.dep-a a{ background: #FFD600; } 
.department.dep-b a{ background: #AAD4E7; } 
.department.dep-c a{ background: #FDB0FD; } 
.department.dep-d a{ background: #A3A2A2; } 
.department.dep-e a{ background: #f0f0f0; } 
</style> 

<h3>Some Content Above</h3> 
<div class="content"> 
    <h1>Responsive Organization Chart</h1> 
    <figure class="org-chart cf"> 
    <ul class="administration"> 
     <li>     
     <ul class="director"> 
      <li> 
      <a href="#"><span>Director</span></a> 
      <ul class="subdirector"> 
       <li><a href="#"><span>Assistante Director</span></a></li> 
      </ul> 
      <ul class="departments cf">        
       <li><a href="#"><span>Administration</span></a></li> 

       <li class="department dep-a"> 
       <a href="#"><span>Department A</span></a> 
       <ul class="sections"> 
        <li class="section"><a href="#"><span>Section A1</span></a></li> 
        <li class="section"><a href="#"><span>Section A2</span></a></li> 
        <li class="section"><a href="#"><span>Section A3</span></a></li> 
        <li class="section"><a href="#"><span>Section A4</span></a></li> 
        <li class="section"><a href="#"><span>Section A5</span></a></li> 
       </ul> 
       </li> 
       <li class="department dep-b"> 
       <a href="#"><span>Department B</span></a> 
       <ul class="sections"> 
        <li class="section"><a href="#"><span>Section B1</span></a></li> 
        <li class="section"><a href="#"><span>Section B2</span></a></li> 
        <li class="section"><a href="#"><span>Section B3</span></a></li> 
        <li class="section"><a href="#"><span>Section B4</span></a></li> 
       </ul> 
       </li> 
       <li class="department dep-c"> 
       <a href="#"><span>Department C</span></a> 
       <ul class="sections"> 
        <li class="section"><a href="#"><span>Section C1</span></a></li> 
        <li class="section"><a href="#"><span>Section C2</span></a></li> 
        <li class="section"><a href="#"><span>Section C3</span></a></li> 
        <li class="section"><a href="#"><span>Section C4</span></a></li> 
       </ul> 
       </li> 
       <li class="department dep-d"> 
       <a href="#"><span>Department D</span></a> 
       <ul class="sections"> 
        <li class="section"><a href="#"><span>Section D1</span></a></li> 
        <li class="section"><a href="#"><span>Section D2</span></a></li> 
        <li class="section"><a href="#"><span>Section D3</span></a></li> 
        <li class="section"><a href="#"><span>Section D4</span></a></li> 
        <li class="section"><a href="#"><span>Section D5</span></a></li> 
        <li class="section"><a href="#"><span>Section D6</span></a></li> 
       </ul> 
       </li> 
       <li class="department dep-e"> 
       <a href="#"><span>Department E</span></a> 
       <ul class="sections"> 
        <li class="section"><a href="#"><span>Section E1</span></a></li> 
        <li class="section"><a href="#"><span>Section E2</span></a></li> 
        <li class="section"><a href="#"><span>Section E3</span></a></li> 
       </ul> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul>   
    </figure> 
</div> 
<h3>Some Content Below</h3> 

任何想法的組織結構圖佈局可以如何爭吵到不低於重疊內容？

Answer 1

我希望這是你在找什麼， 改變我做：

.departments{ 
    height:0; 
    width: 100%; 
} 


@media all and (max-width: 767px){ 
    .department{ 
     float: left; 
     width: 100%; 
     margin-left: 0; 
    } 
} 

http://jsfiddle.net/yvjG4/30/

Answer 2

一個解決方案，也許不是最優雅，是包裝每一節到它自己的DIV，然後讓div封裝組織結構圖的足夠高度，以將底部內容放置在組織結構圖下方。

HTML：

<div class="top-content"></div> 
<div class="middle-content"> 
    // org chart here 
</div> 
<div class="footer-content"></div> 

CSS：

.middle-content{ 
    position:relative; 
    height:2500px; 
}