个人中心
gpt4 book ai didi

Css 分层问题

转载 作者：太空宇宙 更新时间：2023-11-04 04:59:53 25 4
gpt4 key购买 nike

我在分层方面遇到了很多麻烦，我目前的问题是访问者出于某种原因无法单击 div 层内的链接。他们无法突出显示文本，单击边栏中链接的图像。我不知道出了什么问题。任何帮助将不胜感激。

网站:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
  <script src="js/video-js/video.js"></script>
  <script>
    _V_.options.flash.swf = "video-js.swf";
  </script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;} 
</style>
<script type="text/javascript">

function chgbg() {
var d = new Date();
var h = d.getHours();

if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}

}
</script> 
</head>
<body onload="chgbg()">
<div id="Wrapper">
  <div id="navbar" style="display: inline-block;">
<ul id="nav">
    <li id="top">
        <a href="home:index.html">HOME</a>
    </li>

    <li id="top">
        <a href="#">GUIDE</a>
        <ul>
        <li id="submenu"><a href="Htdocs/classes.php">CLASSES</a></li>
        <li id="submenu"><a href="Htdocs/dungeons.php">DUNGEONS</a></li>
        <li id="submenu"><a href="Htdocs/monsters.php">MONSTERS</a></li>
        <li id="submenu"><a href="Htdocs/pets.php">PETS</a></li>
        <li id="submenu"><a href="Htdocs/races.php">RACES</a></li>
        <li id="submenu"><a href="Htdocs/town buildings.php">TOWN BUILDINGS</a></li>
        <li id="submenu"><a href="Htdocs/universe.php">UNIVERSE</a></li>
        <li id="submenu"><a href="Htdocs/wiki.php">WIKI</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">BLOG</a>

        <ul>
        <li id="submenu"><a href="Htdocs/arakion.php">ARAKION</a></li>
        <li id="submenu"><a href="Htdocs/chris taylor.php">CHRIS TAYLOR</a></li>
        </ul>

    </li>
    <li id="top">
        <a href="#">MEDIA</a>
        <ul>
        <li id="submenu"><a href="Htdocs/art.php">CONCEPT ART</a></li>
        <li id="submenu"><a href="Htdocs/screenshots.php">SCREENSHOTS</a></li>
        <li id="submenu"><a href="Htdocs/videos.php">VIDEOS</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="Php/forum/index.php">FORUM</a></li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
  <div id="Sidebar_content">
    <p>&nbsp;</p>
    <p class="title">Social Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10"  class="title" /></p>
    <p><a href="http://www.indiedb.com/games/arakion" target="_new"><img src="images/IndieDBIcon.png" width="35" height="35" /></a> 
        <a href="http://www.facebook.com/Arakion" target="_new"><img src="images/FacebookIcon.png" width="35" height="35" /></a> <a href="http://twitter.com/arakiongame" target="_new"> 
            <img src="images/TwitterICon.png" width="35" height="35" /> </a> <a href="http://www.youtube.com/user/MrLavidimus" target="_new"> <img src="images/YoutubeICon.png" width="35" height="35" /> </a> </p>
    <p>&nbsp;</p>
    <p>Random Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Something</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
  </div></div>
<div style="display: inline-block;" id="main_background">
  <div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
    <table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
      <tr>
        <td width="140"><img src="images/MainImages/Placeholder1.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder2.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder3.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder4.jpg"  height="100%" width="100%"/></td>
      </tr>
      <tr>
        <td width="140">How Housing Works and why we have it    <p>&nbsp;</p></td>
        <td width="140">An In depth look at the Satyr race  <p>&nbsp;</p></td>
        <td width="140">We take a look at the role the alchemist plays in a group   <p>&nbsp;</p></td>
        <td width="140">Our doors are offically open to new employees apply today   <p>&nbsp;</p></td>
      </tr>
    </table>
    <p>&nbsp;</p>
  </div></div>

<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

 <div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"  style="z-index:9;"> 
    <video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="js/video-js/Posters/Test.png"
      data-setup="{}">
    <source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
  </video>
   <a href="index.html">Read More.</a></div></div></div>

 <div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

<div id="footer_background" style=" text-align: center; ">
    <img src="images/Footer_Divider.png" height="10px" width="600px"/>
    <p>&nbsp;</p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
        <div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
        <div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>

CSS 代码:

@font-face {
    font-family: 'KingthingsExeterRegular';
    src: url('font/kingthings_exeter-webfont.eot');
    src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/kingthings_exeter-webfont.woff') format('woff'),
         url('font/kingthings_exeter-webfont.ttf') format('truetype'),
         url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'KingthingsExeterRegular';
    overflow-y: auto;
}
body,td,th {
    font-family: KingthingsExeterRegular;
    background-size: cover;
    background-repeat:no-repeat;
    text-align: center;
    font-size: 15px;
    zoom: 110%
}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    color: #FFF;
}
a:active {
    text-decoration: none;
}
/*Body Css */
#header{
  z-index: -999;
  width:900px ;
  height:800px ;
  position: relative;
  top:0;
  left:0;
}
#left{
  z-index:-9;
  width:239px;
  height:600px ;
  float: left;
  clear: both;
  position: absolute;
  left:-215px;
  top:150px;
}
#right{
  z-index:-2;
  width:239px;
  height:600px ;
  float:right;
  clear: both;
  position: absolute;
  left:960px;
  top:120px;
}
#Wrapper {
    width:1040px;
    margin:auto;
    margin-top:-40px;
    height:2000px;
    position: relative; 
    z-index:0;
}
/*------------------------------------*\
    NAV
\*------------------------------------*/
#navbar{
    position: relative;
    top:91px;
    float:left;
    margin-top:50px;
    margin-left:5px;
    width:649px;
    height: 50px;
    z-index:4;
    margin-bottom:10px;
    clear:both;
}
#nav{
    list-style:none;
    font-weight:bold;
    width:600;
    height:50;
    margin-bottom:5px;
}
#top{
    float:left;
    position:relative;
    background-image:url("images/Button_NavBar_Unselected.png");
    height:55px;
    width:119px;
    font-size:15px;
}
#top:hover{
    background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#submenu_bottem{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#nav a{
    display:block;
    padding-top:20px;
    z-index:-1;
    font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px;
    text-align:center;
    width:100px;
    height:18px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{ 
    left:-30px;
    top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */

}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */

}
/* Main Block */
#main_background{
    width:680px;
    height:519px;
    float:left;
    background-image:url(images/MainSection.png);
}
#main_content{
    width:590px;
    height:430px;
    text-align:left;
    margin-top:20px;
    margin-left:45px;
}
#main_img{
    margin:0 auto;
    margin-top:5px;
    background-image:url(images/MainSection_BigImageHighlight.png);
    width:520px;
    height:300px;
    text-align:center;
    padding-top:4px;
}
#main_section_img{
    margin-top:10px;
    background-image:url(mages/MainSection_SmallImageInsett.png);
    width:560px;
    height:95px;
    text-align:center;
    vertical-align:top; 
    margin-top:0; 
}
#main_section_img td{
    vertical-align:top; 
    margin-top:0; 
}
/* Sub Block */
/*  Sub Background Hierarchy */
#sub_background_1{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-1;
    margin-left:30px;
    top:-38px;
    background-repeat:no-repeat;
}
#sub_background_2{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-2;
    margin-left:30px;
    top:-52px;
    background-repeat:no-repeat;
}
#sub_background_3{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-3;
    margin-left:30px;
    top:-65px;
    background-repeat:no-repeat;
}
#sub_background_4{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-4;
    margin-left:30px;
    top:-77px;
    background-repeat:no-repeat;
}
#sub_background_5{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-5;
    margin-left:30px;
    top:-83px;
    background-repeat:no-repeat;
}
#sub_background_6{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-6;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_7{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-7;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_8{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-8;
    margin-left:30px;
    top:-85px;
    background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
    width:580px;
    height:220px;
    margin:0 auto;
    margin-top:10px;
    clear: both;
}
#Sub_title{
    height:35px;
    width:400px;
    margin-top:30px;
    margin-left:10px;
    font-size:30px;
    text-align: left;
}
#Sub_subtitle{
    height:20px;
    width:200px;
    margin-left:10px;
    margin-top:65;
    font-size:15px;
    text-align: left;
}
#Sub_image{
    height:100px;
    width:100px;
    margin-top:10px;
    margin-left:15px;
    float:left;
}
#Sub_text{
    height:180px;
    width:400px;
    float:right;
    margin-top:5px;
    text-align: left;
    z-index:9;
    position: relative;
}
/* SideBar Block */
#sidebar_header{
    position:relative;
    height:80px;
    width:350px;
    float:right;
    background-image:url(images/Kickstarter.png);
    margin-right:5px;
    left:-20px;
    margin-top:10px;
    z-index:1;
    clear: both;
    top:1px;
}
#sidebar_banner{
    position:relative;
    height:729px;
    width:360px;
    float:right;
    background-image: url(images/Side%20Banner.png);
    left:-20px;
    z-index:-1;
    clear: both;
}
#Sidebar_content{
    margin:0 auto;
    margin-top:20px;
    text-align:center;
    font-size: 20px;
    width:300px;
    height:700px;
    line-height: 3px;
}
#Kickstarter_donationcount{
    width: 119px;
    height: 26px;
    text-align:center;
    top:8px;
    left:230px;
    background-image:url("images/Progress/GoalNumber.png");
    position: absolute;
    padding-top:6px;
}
#Kickstarter_progressbar{
    position:relative;
    top:62px;
    margin:0 auto;
    width: 310px;
    height: 18px;
    background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
        color: #000;
        font:"arial";
        font-size: 18px;
}
#Sidebar_content .title{
    line-break: 1px;
}
/* Footer */
#footer_background{
    position:relative;
    background-image:url(images/Footer.png);
    width:605px;
    height:75px;
    float:left;
    margin-left:35px;
    top:-89px;
    z-index:-9;
    line-height:1px;
    font-family:"Arial";
    font-size:12px;
}
#footer_background a:link{
    color: #000;
    text-decoration: underline;
}
#footer_background img {
    margin-top:100px;
}

最佳答案

Wrapper 正在覆盖其他内容，因此您只想将其推到底部。将 z-index: 0; 添加到 #wrapper。

或者您可以从 #wrapper

中的 div 中删除 z-index: -1

以后只在帖子里面发相关的代码。没有人会费心浏览您的网站来为您解决问题。如果您不能将问题缩小到具体问题，那么您需要更好地进行故障排除。

关于Css 分层问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11711240/

25 4 0
文章推荐： python - 我可以在 Pandas 中做这样的 str 操作吗？
文章推荐： c++ - xcode 将 dylib 复制到带有延迟加载的包中
文章推荐： python - 在 Python 中覆盖父类(super class)时跳过参数
文章推荐： Android NDK 并加入新的共享库
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com