绝对位置的CSS问题它禁用链接？

时间：2011-09-05 15:28:31

标签： html css html5

我有一个非常简单的css文件，它有div'链接'的格式，以给它绝对位置

body {
    background: url(http://www.nextwww.info/sites/west/layout/images/mainbg.gif) repeat-x #fff;
    margin:0;
    padding:0;
    FONT-SIZE: 12px; 
    FONT-FAMILY:"Trebuchet MS";
    color:#65615B;
    text-align:left;
    line-height:16px;
    font-weight: normal;

}
p {margin:0;}

a { 
    text-decoration:underline;
    color:#C92E0C;
}
img{
    border:none;
}
a:hover {
    text-decoration:none;
    color:#C92E0C;
}

a:focus { outline:none }


p {
    margin:0;
}
.clr{
    clear:both;
}

.maincont {
    padding:0px;
    width:100%;
    margin:0;
    position:relative;
}
.links{
position:absolute; 
top:10%; 
left:2%;
}
.header {
    width:940px;
    margin:0 auto;
    height:132px;   
}
.logo {
    float:left;
    padding:46px 0 19px 0;
    width:380px;
    text-align:center;
    font-family: Tahoma;
    font-size:13px;
    font-weight:bold;
    letter-spacing:-0.2px;
}
.logo h1{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#2E2E2E;
    font-weight:bold;
    font-size:17px;
    margin:0;
    letter-spacing:-0.9px;
    padding-bottom:3px;
    text-transform:uppercase;
}
.logo h2{float:left; 
    width:460x; 
    font-size:20px; 
    font-weight:normal !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-left:0px;
    padding:0;
    color:#AD0707;
    text-align:center;
    letter-spacing:-0.5px;
    width:380px;
    padding:0 0 8px 0;
    margin:0;
}
.callUs {
    width:241px;
    float:left;
    line-height:34px;
    color:#CE0202;
    font-size:22px;
    font-weight:bold;
    text-align:center;
    margin:34px 0 0 96px;
    letter-spacing:-0.5px;
    background:url(http://www.nextwww.info/sites/west/layout/images/callUsBg.gif)  no-repeat;
}
.quote{
    float:left;
    margin:10px 0 0 70px;
}
.topRightIcon {
    width:140px;
    margin:-37px 0 0 60px;
    float:left;
}
.topRightIcon img{
    margin:0 3px;
}
/**********************************************
                    Main Banners
/**********************************************/
.bannercountainer{
    background:url(http://www.nextwww.info/sites/west/layout/images/headerMainBg.jpg) repeat;
    height:319px;
    float:left;
    position:relative;
    width:100%;
}
.bannerMain{
    width:940px;
    position:relative;
    margin:0 auto;
}
.bodyMain {
    width:100%;
    float:left;
    position:relative;
    padding:18px 0 0;
    background:url(http://www.nextwww.info/sites/west/layout/images/bodyBg.gif) repeat-x #fff;
}

.images {
    cursor: pointer;
    float: left;
    height:280px;
    margin: 0;
    margin:0;
    position: relative;
    width: 940px;
}
/* single slide */
.images div {
    display:none;
    position:absolute;
    top:0;
    left:0;     
    margin:0px;
    padding:0;
    height:280px;
}
.images div img{
    width:940px;
    height:280px
}

/* header */
.images h3 {
    font-size:22px;
    font-weight:normal;
    margin:0 0 20px 0;
    color:#456;
}

/* tabs (those little circles below slides) */
.slidetabs {
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBg.gif) repeat-x;
    height:39px;
    width:940px;
    float:left;
    font-family:Arial, Helvetica, sans-serif, Calibri !important;
}

/* single tab */
.slidetabs a {
    float:left;
    display:inline;
    font-size:16px;
    font-family:"Trebuchet MS";
    font-weight:bold;
    text-align:center;
    color:#2D2D2D;
    line-height:39px;
    padding:0 17px 0 18px;
    border-right:solid 1px #BCBABA;
    text-decoration:none !important;    
}
.slidetabs a:hover {
    color:#fff;
    padding:0 18px 0 18px;
    border-right:none;
    height:39px;
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBgOver.gif) repeat-x  !important;    
}
.slidetabs a.current {
    color:#fff;
    padding:0 18px 0 18px;
    border-right:none;
    background:url(http://www.nextwww.info/sites/west/layout/images/sliderBtnBgOver.gif) repeat-x  !important; 
}
.slidetabs a.current .topImg {
    background: url(http://www.nextwww.info/sites/west/layout/images/arrowTop.png) no-repeat center;
    height: 10px;
    position: relative;
    top: -49px;
    z-index: 9999;
}
/* active state (current page state) */

/* prev and next buttons */
.forward, .backward {
    margin: 0;
    padding-top:0;
    float:left !important;
    z-index: 999;
    float:left; !important; 
}
.forward, .backward {
    background: url(http://www.nextwww.info/sites/west/layout/images/left.png) no-repeat scroll 0 0 transparent;
    height:50px !important;
     width: 23px;
      top:115px;
    position: absolute !important;
      left:-23px;
     cursor:pointer;
}
.forward, .backward a:hover{
    background: url(http://www.nextwww.info/sites/west/layout/images/right.png) no-repeat scroll 0 0 transparent;
    height:50px !important;
     width: 23px;
     cursor:pointer;
     left:0;
     right:0 !important
}
.nextArrow{
    position:absolute !Important;
    left:auto;
    right:-23px !Important;
}
/* next */

/* disabled navigational button. is not needed when tabs are configured with rotate: true */
.disabled {
    visibility:hidden !important;       
}
.tabsMain {
    clear: both;
    left: 420px;
    padding-right: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 9999;
}
.tabsMain .play{
    cursor:pointer;
    width:33px;
    height:21px;
    border:solid 1px #000;
    color:#fff;
    float:left;
    line-height:21px;
    background: url(http://www.nextwww.info/sites/west/layout/images/playStopBg.png) repeat-x;
}
.tabsMain .stop{
    cursor:pointer;
    width:33px;
    height:21px;
    border:solid 1px #000;
    color:#fff;
    line-height:21px;
    float:left;
    background: url(http://www.nextwww.info/sites/west/layout/images/playStopBg.png) repeat-x;
}
.banner01 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner1.jpg) no-repeat;
}
.banner02 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner2.jpg) no-repeat;
}
.banner03 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner3.jpg) no-repeat;
}
.banner04 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner4.jpg) no-repeat;
}
.banner05 {
    cursor: pointer;
    float: left;
    height: 280px;
    margin: 0;
    position: relative;
    width: 940px;
    background: url(http://www.nextwww.info/sites/west/layout/images/banner5.jpg) no-repeat;
}
/**********************************************
                    left part
/**********************************************/
.contentArea {
    width:940px;
    position:relative;
    padding:0;
    margin:0 auto;
}
.leftMain {
    width:260px;
    float:left;
    margin-right:20px;
}
.leftbox {
    width:222px;
    float:left;
    background-color:#f6f6f6;
    border:solid 1px #BDB8B8;
    padding:18px 18px 0;
    margin-bottom:15px;
}
.leftbox p{
    padding:0 0 15px 0;
}
.leftbox p span{
    color:#B40707;
    display:block;
    padding-top:5px;
    font-weight:bold;
}
.leftbox h1{
    border-bottom: 1px solid #D5D5D5;
    color: #2D2D2D;
    font-size: 18px;
    font-weight: normal;
    margin:0 0 10px 0;
    padding-bottom: 12px;
    letter-spacing:-0.5px;
}
.leftbox h2{
    color:#B40707;
    font-size: 14px;
    font-weight:bold;
    margin:0 0 10px 0;
}
.leftbox img{
    margin:-7px 5px 0 0;
    float:left;
}
.leftbox ul{
    margin:0 0 0 15px;
    padding:5px 0 15px 5px;
    font-size:14px;
    float:left;
    font-weight:bold;
}
.leftbox ul li{
    float:left;
    padding:6px 0;
    width:200px;
    color:#4b4b4b;
    line-height:15px;
    font-style:italic;
}
.leftbox ul li font{
    display:block;
    color:#9e0909;
}
.leftbox ul li a{
    color: #0451a0;
    text-decoration:underline;
}
.leftbox ul li a:hover{
    color:#0451a0;
    text-decoration:none;
}
.licensed {
    margin-left:10px;
    float:left;
    padding-bottom:20px;
}
/**********************************************
                    right part
/**********************************************/
.rightMain {
    width:651px;
    float:left;
}
.contentBox {
    width:651px;
    float:left;
}
.contentBox h1{
    font-size:24px;
    font-weight:bold;
    color:#BA1414;
    margin:0;
    padding-bottom:10px;
}
.contentBox ul{
    margin:0;
    padding:5px 0 0 10px ;
    list-style:none;
}
.contentBox ul li{
    padding-left:20px;
    line-height:20px;
    background:url(http://www.nextwww.info/sites/west/layout/images/bullet01.gif) no-repeat center left;
}
.contentBox p{
    padding:5px 0;
    line-height:18px;
    clear:both;
    text-align:justify;
}
.contentBox img{
    margin:0 10px 0 0;
    float:left;
}
.imageRight{
    margin:0 0 0 10px !important;
    float:right !important;
}
/******************************************************
                Bottom Part
/*****************************************************/
.bottomMain {
    width:100%;
    height:89px;
    background:url(http://www.nextwww.info/sites/west/layout/images/bottomBg.gif) repeat-x;
}
.bottomNav {
    margin:0 auto;
    width:940px;
    font-size:12px;
    color:#575757;
    line-height:89px;
}
.addressBox {
    float:left;
    line-height: 14px;
    padding-top: 12px;
    width: 400px;
}
.addressBox span{
    float:left;
    width:400px;
    padding:3px 0;
}
/******************************************************

/*****************************************************/

    pre{
        display:block;
        font:12px "Courier New", Courier, monospace;
        padding:10px;
        border:1px solid #bae2f0;
        background:#e3f4f9; 
        margin:.5em 0;
        width:674px;
        }   

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

    #bottomBannerMain{  
    border: 1px solid #DEDEDE;
    float: left;
    padding:0 10px;
    position: relative;
    text-align: left;
    width: 628px;
    margin:5px 0 10px 0;
        }   

    #content{
        position:relative;
        }           

/* Easy Slider */

    #slider ul, #slider li,
    #slider2 ul, #slider2 li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width: 631px !important;
        overflow:hidden; 
        }   

        #slider li img{ 
        width:190px;
        height:134px;
        margin:0 8px;

        }   
    #prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display: block;
        height: 27px;
        left:-28px;
        position: absolute;
        top: 54px;
        width: 30px;
        z-index: 1000;
        }   
    #nextBtn, #slider1next{ 
        display: block;
        height:27px;
        position: absolute;
        right:-28px !important;
        top: 54px;
        width: 30px;
        z-index: 1000;
        left:auto;
        }                                                       
    #prevBtn a, #nextBtn a,
    #slider1next a, #slider1prev a{  
        display:block;
        position:relative;
        width:27px;
        height:27px;
        background:url(http://www.nextwww.info/sites/west/layout/images/left02.png) no-repeat 0 0;  
        }   
    #nextBtn a, #slider1next a{ 
        background:url(http://www.nextwww.info/sites/west/layout/images/right02.png) no-repeat 0 0; 
        }   

    /* numeric controls */  

    ol#controls{
        margin:1em 0;
        padding:0;
        height:28px;    
        }
    ol#controls li{
        margin:0 10px 0 0; 
        padding:0;
        float:left;
        list-style:none;
        height:28px;
        line-height:28px;
        }
    ol#controls li a{
        float:left;
        height:28px;
        line-height:28px;
        border:1px solid #ccc;
        background:#DAF3F8;
        color:#555;
        padding:0 10px;
        text-decoration:none;
        }
    ol#controls li.current a{
        background:#5DC9E1;
        color:#fff;
        }
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */

div.htmltooltip{
    position: absolute; /*leave this and next 3 values alone*/
    z-index: 1000;
    left: -1000px;
    top: -1000px;
    background: #fff;
    float:left;
    border: 1px solid #dadada;
    color: #000;
    padding:8px 10px 10px 10px;
    width: 250px; /*width of tooltip*/
}
div.htmltooltip p{
    padding:7px 0 0 0;
}
.tool-trustedlocksmith {
    float:left; 
    width:460x; 
    font-size:20px; 
    font-weight:normal !important;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin-left:0px;
    padding:0;
    color:#AD0707;
    text-align:center;
    letter-spacing:-0.5px;
    width:360px;
    padding:4px 0;
}

我的问题是，当我以前使用maincont div之外的链接div时，所有链接都被禁用 例如

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/screen.css">

</head>
<body  bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="initAnimation();">
<div class="links"><div style="float: left;margin:10px;"><a href="#">welcome</a></div> <div style="float: left;margin:10px;"> hello </div><div style="clear:both;"></div></div>
<div class="maincont">

在此示例中，我无法单击欢迎链接

2 个答案:

答案 0 :(得分：4)

没有看到你的maincont问题无法再现。用拉丁语填充但是显示它从页面顶部开始并在链接前面分层。添加一个top：100px到你的maincont修复了这个问题，并可能解决问题 - 这取决于.maincont包含的内容。

.maincont {
    padding:0px;
    width:100%;
    margin:0;
    position:relative;
    top:100px;
}

或重新排列html 

<body  bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="initAnimation();">
<div class="maincont">
<div class="links"><div style="float: left;margin:10px;"><a href="#">welcome</a></div> <div style="float: left;margin:10px;"> hello </div><div style="clear:both;"></div></div>

这样链接就会在不在其后面的内容之前分层。

其他解决方案是使用带链接的zindex将其放在前面。

答案 1 :(得分：1)

将padding-top添加到.maincont，可以正常使用

.maincont {
    padding:0px;
    padding-top:150px;
    width:100%;
    margin:0;
    position:relative;
}

我选择150px，但您可以根据需要进行调整。

工作示例： http://jsfiddle.net/jasongennaro/9v6GH/

修改

误读了这个问题！您需要链接才能工作。同时在样式中添加否定z-index，一切都会很好。

.maincont {
    padding:0px;
    padding-top:150px;
    width:100%;
    margin:0;
    position:relative;
    z-index:-1;
}

更新了示例： http://jsfiddle.net/jasongennaro/9v6GH/1/

相关问题
最新问题