Содержимое под абсолютным расположением CSS3 Tab Bar

Question

В настоящее время я работаю над панелью вкладок, созданной только с CSS3 (и я действительно хочу избежать javascript/jquery). Я нашел хороший учебник и изменил исходный код для моих нужд. К сожалению, любой контент под моей панелью вкладок будет помещен на фоне «tab-content» -ids, поскольку они расположены в абсолютном режиме. Но я хочу, например, нижний колонтитул должен появиться под моим содержимым табуляции с переменной высотой, а не позади него. Я уже пытался изменить параметры позиционирования, но в результате «tab-content» будет протекать под одной таблицей tab1/2/3/4-label.

Вот мой стилей:

.tabs input[type=radio] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
.tabs { 
    width: 960px; 
    float: none; 
    list-style: none; 
    position: relative; 
    padding: 0; 
    margin-top:30px; 
    font-size:14px; 
} 
.tabs li { 
    float: left; 
} 
.tabs label { 
    display: block; 
    padding: 10px 20px; 
    cursor: pointer; 
    position: relative; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    color: #aaa; 
} 
.tabs label:hover { 
    top: 0; 
    color: #000; 
} 
[id^=tab]:checked + label { 
    color: #000; 
} 
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div { 
    display: block; 
} 
.tab-content { 
    z-index: 2; 
    display: none; 
    text-align: left; 
    overflow: hidden; 
    width: 100%; 
    line-height: 140%; 
    padding-top: 10px; 
    padding: 15px; 
    position: absolute; 
    top: 53px; 
    left: 0; 
    box-sizing: border-box; 
    font-size:14px; 
    float:left; 
} 
.tab-content > div { 
    display: none; 
    -webkit-animation-duration: 0.5s; 
    -o-animation-duration: 0.5s; 
    -moz-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
} 
.TabBar { 
    float:left; 
    width: 960px; 
    height:auto; 
} 

и мой HTML исходный код:

<!-- TABBAR !--> 
    <div class="TabBar"> 
    <ul class="tabs"> 
     <li> 
     <input type="radio" checked name="tabs" id="tab1"> 
     <label for="tab1">First Tab</label> 
     <div id="tab-content1" class="tab-content"> 
      <div class="animated fadeInRight"> Lorem Ipsum 1 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab2"> 
     <label for="tab2">Second Tab</label> 
     <div id="tab-content2" class="tab-content"> 
      <div class="animated fadeInRight"> Lorem Ipsum 2 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab3"> 
     <label for="tab3">Third Tab</label> 
     <div id="tab-content3" class="tab-content"> 
      <div class="animated fadeInRight "> Lorem Ipsum 3 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab4"> 
     <label for="tab4">Fourth Tab</label> 
     <div id="tab-content4" class="tab-content"> 
      <div class="animated fadeInRight "> Lorem Ipsum 4 </div> 
     </div> 
     </li> 
    </ul> 
    </div> 

А вот пример моего вопроса на CodePen: http://codepen.io/DanielCoding/pen/Fxrnw

I не имею идеи, как я мог бы справиться с этим.

Спасибо заранее!

Answer 1

Если я понимаю эту проблему, вам нужно изменить некоторые свойства в css.

1. .tab-content set whitout position propiretes (только float: left;) и установить margin-top: 35px;
2. .tabs метка установленное положение: абсолютное и заданное значение для любого ярлыка отдельно, как .tabs label: nth-child (1) {left: 0px} .tabs label: nth-child (2) {left: 100px}. tabs label: nth-child (3) {left: 200px}

Теперь вы можете добавить нижний колонтитул div в конце страницы.

Я надеюсь, что эта помощь.

Answer 2

Если я правильно понимаю проблему, вам просто нужно добавить некоторый css, чтобы заставить контейнер вкладок обернуться вокруг плавающих элементов и занять высоту элементов.

Просто добавьте

.tabs { 
    overflow:hidden; 
    ... 

Я надеюсь, что это помогает.

Answer 3

Я изменил ваш css. Теперь он отлично работает.

.wrapper .TabBar { 
    position: relative; 
    height: 200px; 
} 
.wrapper .TabBar ul { 
    padding: 0; 
} 
.wrapper .TabBar ul li { 
    list-style: none; 
    display: inline-block; 
} 
.wrapper .TabBar ul li input[type=radio] { 
    position: relative; 
    width: 100%; 
    opacity: 0; 
    top: 20px; 
    cursor: pointer; 
} 
.wrapper .TabBar ul li input[type=radio]:checked ~ .tab-content { 
    display: block; 
} 
.wrapper .TabBar ul li input[type=radio]:checked + label { 
    background-color: #00c9ed; 
} 
.wrapper .TabBar ul li input[type=radio]:hover + label { 
    background-color: #8eeeff; 
} 
.wrapper .TabBar ul li label { 
    cursor: pointer; 
    display: block; 
    background-color: #eee; 
    padding: 10px; 
} 
.wrapper .TabBar ul li label:hover { 
    background-color: #8eeeff; 
} 
.wrapper .TabBar ul li .tab-content { 
    position: absolute; 
    left: 0; 
    display: none; 
} 

Вам необходимо применить свои анимации.