Question

好的我有一张图片，当你点击你去某个网址（直接链接或类似的东西）我的下面还有一个带有文字的盒子，由于某种原因，图像是不可点击的，并且无法复制下面带有文本的框（当然文本不是框），

图像很好＆amp;可点击直到我用CSS定位它然后它将无法工作，下面的文本框也使用CSS定位但我不知道为什么会让它无法点击和不可复制这是图像的css和文本框

    }
#left{
width:120px;
height:auto;
float:left;
margin-top:10px;
margin-left:150px;
}

这是图像和文本框的HTML代码

    <div id="left"> <a href="user.php" target="_blank" align="right"><img src="img/acc.png"></a></div>
<br><br><br><br><br><br>
<div id="boxes">
<div id="left">
<div id="box-top-green">Users & Ranks</div>
<div id="box-centro">
                    <p>MxS II Tankz (Leader)
                    </p>MxS II Tacks (Co Leader)
                    <p> MxS II xTech (Tech) 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p>MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II ---
</div>
<div id="box-abajo"></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" />
<title>MxS Offical Website</title>
<link href="./css/index.css" rel="stylesheet" type="text/css" />
<link href="./css/box.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="nav">
<a href="http://www.youtube.com">xTech</a>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
<div class="menu">utubeuser</div>
</div>


<div id="header"><div style="position:absolute; top:46px; left:50px">
<br><br>


<a href="https://www.facebook.com/pages/Mxs-Clan/474428962653273?ref=hl" target="_blank" align="right"><img src="http://www.niftybuttons.com/3d/facebook.png"></a><a href="http://www.youtube.com/" target="_blank" align="left"><img src="http://www.niftybuttons.com/3d/youtube.png"></a>


<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>



<div id="right">
<div id="box_top_green">MxS - Be Apart Of The Experiance</div>

<div id="box_centro">MxS (MircoXGaming, is a "sniping clan we play various call of duty games 
Such As <br> MW2, Black ops 1 & Black ops 2 and more <br> We are currently explanding over both console 
<br> Xbox 360, And Playstation 3, Some of our clan members have even pre - ordered PS4 And XBOX One 
But Lets get down to the point, If you want to be apart of the "Clan" there a a few step you have to go through
<br> First you need to go to the try out page, You should find the link in the red bar above
<br> And on the try out page further instructions will be there, Thanks -MxS xTech<br></div>


<div id="box_abajo"></div>
<div id="box_top_green">MxS - A Elite Sniping Clan - MicroXGaming</div>

<div id="box_centro"><object width="640" height="360">
  <param name="movie" value="https://www.youtube.com/v/ppTnSl7Fi7Q?version=3"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="https://www.youtube.com/v/ppTnSl7Fi7Q?version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></embed>
</object></div>
<div id="box_abajo"></div>
</div>
</div>



<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<div id="left"> <a href="user.php" target="_blank" align="right"><img src="img/acc.png"></a></div>
<br><br><br><br><br><br>
<div id="boxes">
<div id="left">
<div id="box-top-green">Users & Ranks</div>
<div id="box-centro">
                    <p>MxS II Tankz (Leader)
                    </p>MxS II Tacks (Co Leader)
                    <p> MxS II xTech (Tech) 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II --- 
                    </p>MxS II --- 
                    <p> MxS II --- 
                    </p> MxS II --- 
                    <p> MxS II ---
</div>
<div id="box-abajo"></div>





</div>



<br><br><br><br>

</head>
<body>

<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>



<div id="footer">Site Made By xTech - Zac<div style="width:300px; float:right;">All rights to there respective owners</div></div>


</body>

Box.css

#boxes{
width:100%;
height:auto;
margin:auto;
margin-top:35px;
}
#left{
width:120px;
height:auto;
float:left;
margin-top:10px;
margin-left:150px;
}
#right{
width:600px;
height:auto;
float:left;
margin-top:-238px;
margin-left:510px;
}
#box-top-green{
background-image:url(../img/box-top-green.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-top-yellow{
background-image:url(../img/box-top-yellow.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-top-violet{
background-image:url(../img/box-top-violet.png);
width:307px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box-centro{
background-image:url(../img/box-centro.png);
width:315px;
height:auto;
margin:auto;
float:left;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#box-abajo{
background-image:url(../img/box-abajo.png);
width:325px;
height:6px;
margin:auto;
float:left;
}
#box_top_violet{
background-image:url(../img/box_top_violet.png);
width:645px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box_top_green{
background-image:url(../img/box_top_green.png);
width:645px;
height:28px;
margin:auto;
float:left;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:18px; padding-top:22px;
margin-top:10px;
}
#box_centro{
background-image:url(../img/box_centro.png);
width:653px;
height:4000;
margin:auto;
float:left;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#box_abajo{
background-image:url(../img/box_abajo.png);
width:663px;
height:6px;
margin:auto;
float:left;
}

Index.css

body{
margin-top:0;
margin:auto;
background-image:url(../img/bg.png);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
@font-face {
    font-family:Volter;
    src: url(./volter.ttf);
}

.menu{ display: inline;}
.menu{padding:8px 8px 14px 6px; color: #FFF; text-decoration: none; font-family:Volter; font-size:9px; text-shadow: 0px -1px #000000, 0px 0px #000000, 0px 0px #000000;}

#header{
background-image:url(../img/banner.png);
width:100%;
height:89px;
margin:auto;
}
#nav{
background-image:url(../img/nav.png);
width:97.6%;
height:20px;
margin:auto;
font-family:Volter;
color:#000000;
padding-top:10px;
padding-left:30px;
}
#footer{
background-image:url(../img/footer.png);
width:3336;
height:27px;
margin:auto;
font-family:Volter; font-size:9px; color:#FFFFFF; text-transform:uppercase;
text-shadow: 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000;
padding-left:8px; padding-top:8px;
}

我为你创造了一个小提琴，帮助其他人形象化问题。我已将图片网址更改为公开内容。如果您有需要，请随意编辑这个小提琴。 Eric MORAND。

http://jsfiddle.net/z7RhQ/

Answer 1

我觉得问题来自于#left div与#header div的第一个孩子重叠的事实。第一个孩子（我们称之为TheDiv）绝对定位，顶部为46px，最高为50px。它包含一个div（#right），宽度为600px，高度为585px，左边距为510px。因此，TheDiv的布局引擎大小为1110px（600 + 510）x 710px（585 + looooot <br>）。

绝对定位，它与位于1110 x 710px这个巨大矩形内的任何东西重叠。

不幸的是，我相信你的布局存在严重缺陷。

Answer 2

你对该文字有一个绝对定位的div。

#header>div有这个css。

position:absolute; top:46px; left:50px

应该是。

position:absolute; top:46px; left:560px

它有一个孩子（#right），左边距为510px。那应该是0。

demo

Answer 3

好吧，也许我找到了解决这个问题的方法。

我更改了HTML结构，因此我在图像上放置了一个链接（带有文本），没有链接。

图片位于使用css background-image:...;

添加的内容div的后面

这是HTML结构：

<div class="text">
   <a href="#">Text copy here</a>
</div>

CSS：

.text {
border:1px solid black;
width:300px;
height:200px;
display:table;
background-image:url(http://www.starcoppe.it/images/grafica-immagine-b.jpg);
background-size:300px 200px;
}

.text a{
content:'';
display:table-cell;
margin:0 auto;
vertical-align:middle;
text-align:center;
text-decoration:none;
color:black;
}

无论如何要看DEMO。

HTML / CSS Unclickable image＆amp;不可复制的文字

3 个答案:

demo