CSS 选项卡>Div 隐藏在容器 Div 后面

Question

我很难弄清楚是什么导致了"选项卡式"；要从视图中隐藏的div。我不知道是内容还是容器div导致了这个问题。

如果您更改"；。选项卡>div"；从绝对位置到相对位置，则div class＝"；选项卡式"；按照我的意愿显示，但它会导致选项卡的内容堆叠在一起。

这是位置/z索引还是溢出问题？

如有任何帮助，我们将不胜感激。

这是代码：

* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}

/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}

/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
@media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i>&nbsp; Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>     

</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>

Answer 1

我很难弄清楚是什么导致了"选项卡式"；要从视图中隐藏的div。

您的HTML标记有错误。更改此项：

Download</button</a>

对此：

Download</button></a>

并将其添加到您的CSS:中

.container {
min-height: 350px;
}

如果你不想手动设置最小高度，那么你需要使用JS来动态计算它。很难想象用纯CSS来做这件事。