0
由于某些原因，此页面上的选项卡与我的工具提示重叠。我尝试了一切，从改变位置：绝对到相对，并设置不同的Z-索引没有任何成功。CSS重叠问题
此页面上的所有内容均使用纯CSS。从tabs.css文件中删除代码修复了这个问题，但是当然我的选项卡将不起作用。我的网页：http://www.icb.org.au/DSS
HTML
<div class="newslettersec fourcolgal tab tab-anim-slide-down">
<input type="radio" name="tab" checked id="tab1" class="tab-content-1" value="1">
<label for="tab1"><span><span>Webinars</span></span></a></label>
<input type="radio" name="tab" id="tab2" class="tab-content-2" value="2">
<label for="tab2"><span><span>Queensland</span></span></label>
<input type="radio" name="tab" id="tab3" class="tab-content-3" value="3">
<label for="tab3"><span><span>NSW</span></span></label>
<input type="radio" name="tab" id="tab4" class="tab-content-4" value="4">
<label for="tab4"><span><span>ACT</span></span></a></label>
<input type="radio" name="tab" id="tab5" class="tab-content-5" value="5">
<label for="tab5"><span><span>Victoria</span></span></label>
<input type="radio" name="tab" id="tab6" class="tab-content-6" value="6">
<label for="tab6"><span><span>Western Australia</span></span></label>
<input type="radio" name="tab" id="tab7" class="tab-content-7" value="7">
<label for="tab7"><span><span>South Australia</span></span></label>
<input type="radio" name="tab" id="tab8" class="tab-content-8" value="8">
<label for="tab8"><span><span>Tasmania</span></span></label>
<input type="radio" name="tab" id="tab9" class="tab-content-9" value="9">
<label for="tab9"><span><span>NT</span></span></label>
<ul class="ourHolder">
<div class="tab-content-1">
<li class="item">
<div class="tooltip">
<p class="networksheadingthumb">
Sydney - Balmain
</p>
<p class="networksthumb">
21st October, 2013<br />
Starting 6:15pm
</p>
<p class="networksthumb">
Facilitated by:<br />
Sue Taylor
</p>
<span>
<img class="facilitatorimage" src="/ICB/images/Shane Taylor HORSHAM.jpg" width="100" height="155" style="float:right; margin-top:10px;" />
<h6 class="facilitatorname">Sue Taylor</h6>
<p class="facilitatorbio">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="facilitatorbio">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p class="facilitatorbio">
An unrelated company with the same name was incorpor in California in 1991. As of 2012, its operations are suspended run regular network meetings around the country please log using link here.
</p>
</span>
</div>
</li>
</div>
<div class="tab-content-2">
@content[NetworkEventQld]
</div>
<div class="tab-content-3">
@content[NetworkEventNSW]
</div>
<div class="tab-content-4">
@content[NetworkEventACT]
</div>
<div class="tab-content-5">
@content[NetworkEventVIC]
</div>
<div class="tab-content-6">
@content[NetworkEventWA]
</div>
<div class="tab-content-7">
@content[NetworkEventSA]
</div>
<div class="tab-content-8">
@content[NetworkEventTAS]
</div>
<div class="tab-content-9">
@content[NetworkEventNT]
</div>
</ul>
<div class="clear"></div>
</div>
tabs.css
.tab {
margin: 0;
padding: 0;
outline: none;
border: 0;
background: none;
}
.tab {
position: relative;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0;
color: #666;
}
.tab > input {
position: absolute;
display: none;
}
.tab > label {
position: relative;
z-index: 1;
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 1px;
padding-top: 0;
padding-left: 0;
font-size: 13px;
line-height: 45px;
cursor: pointer;
}
.tab > label.inverse {
float: right;
padding-right: 0;
padding-left: 1px;
}
.tab > label.disabled {
cursor: default;
}
.tab > label span {
display: block;
padding: 5px;
background: rgba(255,255,255,0.9);
}
.tab > label span span {
padding: 0 20px;
background: #848484;
margin-bottom:40px;
color:#fff;
border-radius:1px;
transition: background 0.4s, color 0.4s;
-o-transition: background 0.4s, color 0.4s;
-ms-transition: background 0.4s, color 0.4s;
-moz-transition: background 0.4s, color 0.4s;
-webkit-transition: background 0.4s, color 0.4s;
}
.tab > label:hover span span {
background: #438bcf;
color: #fff;
}
.tab > label.disabled span span {
background: transparent;
color: inherit;
}
.tab > input:checked + label {
cursor: default;
}
.tab > input:checked + label span span {
background: #438bcf;
color: #fff;
}
.tab > ul {
list-style: none;
position: relative;
display: block;
font-size: 13px;
}
.tab > ul > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: auto;
background: rgba(255,255,255,0.9);
box-sizing: border-box;
-moz-box-sizing: border-box;
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: opacity 0.8s, -o-transform 0.8s;
-ms-transition: opacity 0.8s, -ms-transform 0.8s;
-moz-transition: opacity 0.8s, -moz-transform 0.8s;
-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
.tab > .tab-content-1:checked ~ ul > .tab-content-1,
.tab > .tab-content-2:checked ~ ul > .tab-content-2,
.tab > .tab-content-3:checked ~ ul > .tab-content-3,
.tab > .tab-content-4:checked ~ ul > .tab-content-4,
.tab > .tab-content-5:checked ~ ul > .tab-content-5,
.tab > .tab-content-6:checked ~ ul > .tab-content-6,
.tab > .tab-content-7:checked ~ ul > .tab-content-7,
.tab > .tab-content-8:checked ~ ul > .tab-content-8,
.tab > .tab-content-9:checked ~ ul > .tab-content-9,
.tab > .tab-content-10:checked ~ ul > .tab-content-10,
.tab > .tab-content-11:checked ~ ul > .tab-content-11,
.tab > .tab-content-12:checked ~ ul > .tab-content-12,
.tab > .tab-content-13:checked ~ ul > .tab-content-13,
.tab > .tab-content-14:checked ~ ul > .tab-content-14,
.tab > .tab-content-15:checked ~ ul > .tab-content-15,
.tab > .tab-content-16:checked ~ ul > .tab-content-16,
.tab > .tab-content-17:checked ~ ul > .tab-content-17,
.tab > .tab-content-18:checked ~ ul > .tab-content-18,
.tab > .tab-content-19:checked ~ ul > .tab-content-19,
.tab > .tab-content-20:checked ~ ul > .tab-content-20{
position: relative;
z-index: 1;
opacity: 1;
}
/**/
/* animations */
/**/
.tab-anim-slide-down > ul > div {
-o-transform: translateY(15%);
-ms-transform: translateY(15%);
-moz-transform: translateY(15%);
-webkit-transform: translateY(15%);
}
.tab > .tab-content-1:checked ~ ul > .tab-content-1,
.tab > .tab-content-2:checked ~ ul > .tab-content-2,
.tab > .tab-content-3:checked ~ ul > .tab-content-3,
.tab > .tab-content-4:checked ~ ul > .tab-content-4,
.tab > .tab-content-5:checked ~ ul > .tab-content-5,
.tab > .tab-content-6:checked ~ ul > .tab-content-6,
.tab > .tab-content-7:checked ~ ul > .tab-content-7,
.tab > .tab-content-8:checked ~ ul > .tab-content-8,
.tab > .tab-content-9:checked ~ ul > .tab-content-9,
.tab > .tab-content-10:checked ~ ul > .tab-content-10,
.tab > .tab-content-11:checked ~ ul > .tab-content-11,
.tab > .tab-content-12:checked ~ ul > .tab-content-12,
.tab > .tab-content-13:checked ~ ul > .tab-content-13,
.tab > .tab-content-14:checked ~ ul > .tab-content-14,
.tab > .tab-content-15:checked ~ ul > .tab-content-15,
.tab > .tab-content-16:checked ~ ul > .tab-content-16,
.tab > .tab-content-17:checked ~ ul > .tab-content-17,
.tab > .tab-content-18:checked ~ ul > .tab-content-18,
.tab > .tab-content-19:checked ~ ul > .tab-content-19,
.tab > .tab-content-20:checked ~ ul > .tab-content-20{
-o-transform: translate(0,0);
-ms-transform: translate(0,0);
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
}
.panes {
overflow: hidden;
clear: both;
float: left;
width: 100%;
}
.panes div {
padding: 15px 0;
}
.panes h4 {
font-weight:normal;
margin:0 0 10px 0;
font-size:16px;
color:#000;
}
.panes p {
margin:10px 0 0 0;
}
.panes img {
margin-bottom:10px;
}
tooltip.css
div.tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;}
div.tooltip strong {line-height:30px;}
div.tooltip > span
{
width:200px;
padding: 10px 20px;
margin-left: -4px;
margin-top:-450px;
opacity: 0;
visibility: hidden;
z-index: 10;
position: absolute;
font-family: Arial;
font-size: 12px;
font-style: normal;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 2px #999;
-moz-box-shadow: 2px 2px 2px #999;
box-shadow: 2px 2px 2px #999;
-webkit-transition-property:opacity, margin-top, visibility, margin-top;
-webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
-moz-transition-property:opacity, margin-top, visibility, margin-top;
-moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
-o-transition-property:opacity, margin-top, visibility, margin-top;
-o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
-o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-property:opacity, margin-top, visibility, margin-top;
transition-duration:0.4s, 0.3s, 0.4s, 0.3s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
}
/*div.tooltip > span:hover,*/
div.tooltip:hover > span
{
opacity: 1;
text-decoration:none;
visibility: visible;
overflow: visible;
margin-top:-490px;
display: inline;
margin-left: -4px;
}
div.tooltip span b {
width: 15px;
height: 15px;
margin-left: 20px;
margin-top: -19px;
display: block;
position: absolute;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: inset -1px 1px 0 #fff;
-moz-box-shadow: inset 0 1px 0 #fff;
-o-box-shadow: inset 0 1px 0 #fff;
box-shadow: inset 0 1px 0 #fff;
display: none\0/;
*display: none;
}
div.tooltip > span {
color: #000000;
background: #FBF5E6;
background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0);
border: 1px solid #CFB57C;
}
div.tooltip span b {
background: #FBF5E6;
border-top: 1px solid #CFB57C;
border-right: 1px solid #CFB57C;
}