CSS重叠问题

时间：2014-06-24 03:39:05

标签： javascript html css web

由于某种原因，此页面上的标签与我的工具提示重叠。我已经尝试了从更改位置：绝对到相对和设置不同的z索引而没有任何成功的所有内容。

此页面上的所有内容都使用纯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;
}

1 个答案:

答案 0 :(得分：0)

查看您的页面，我发现问题似乎是ul元素的高度限制了工具提示。我建议不要使用ul元素并制作一个包装所有盒子的盒子，并按照与现在设置类似的方式安装盒子。您在顶部的导航（标签大小）也比可见按钮大得多。你也可以把它自己的div和内容放在两个不同的div上，这样它们就不会重叠，你可以用不同的方式设置它们，而不是把它放在同一个元素中。

相关问题
最新问题