絕對位置的css問題，它禁用鏈接？

我有已格式化的div一個非常簡單的CSS文件「鏈接」，給它絕對位置絕對位置的css問題，它禁用鏈接？

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">

在這個例子中我不能點擊歡迎鏈接

來源

2011-09-05 Marco

不能[複製]（http://xkcd.com/583/）你的問題。也許我們需要所有的HTML（你的HTML包含幾乎只有開放標籤） –

沒有我的HTML不包含任何開放標籤我剛剛複製有div的部分我沒有複製所有的代碼 – Marco

我的意思是你的HTML代碼片段有很多不匹配的標籤，我認爲這就是爲什麼我不能重現您的問題：[jsFiddle]（http://jsfiddle.net/Mtmy9/） –

沒有看到你的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和鏈接將它放在前面。

來源

2011-09-05 23:16:58 Wayne

z-index解決方案的+1 - 這就是我會建議，因爲這是爲我修復它。 – Nightfirecat

添加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/

來源

2011-09-05 23:57:14

不適用於我 - 鏈接仍然無法點擊。 – Nightfirecat

對不起。誤讀Q.感謝您指出@Nightfirecat。編輯並修復。 –

絕對位置的css問題，它禁用鏈接？

回答

相關問題