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;
}