Question

我有我的徽标，其DIV跨越100％的屏幕。这意味着我无法点击我的链接，因为它重叠了我已尝试z-index，但不确定我还能做什么？

这是我的意思的一个例子：

HTML

<div id="header">
                    <div class="login">
                        <div class="login-text"> 
                            <a class="login-a" href="/index.php?route=account/login">Login</a>
                            |
                            <a class="login-a" href="/index.php?route=account/account">View Account</a>
                            |
                            <a class="login-a" href="/index.php?route=account/logout">Logout</a>
                        </div>
                    </div>

                    <?php if ($logo) { ?>
                    <div id="logo"><a  href="<?php echo $home; ?>"><img id="la-logo" src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" /></a></div>
                    <?php } ?>
                </div>

CSS

#la-logo{
display: block;
margin: 0 auto;
max-width: 100%;
  }
 .login{
   width: 290px;
   height: 40px;
   background-color: #FFFFFF;
    text-align: right;
   padding-right: 0px;
   float: right;
display: inline-block;
 }
.login-text{
padding-right: 50px;
padding-top: 10px;
font-family:'quicksandlight';
 }
  .login a{
  color: #000000;
 padding-right: 0px;
 #header #logo {
 position: relative;
 top: 5px;
 margin: 0px auto;
}

Answer 1

您需要提供代码，默认情况下，除了浏览器默认样式之外，指定了width: 100%;的div元素不会导致它重叠链接。

只是将z-index属性添加到元素不会使其工作，也必须定位该元素，您可以尝试position: relative;。

但是在这种情况下你不应该有重叠的元素，你的代码会帮助我们做得更好。

Answer 2

您可以使用指针事件：无为您的div进行点击。

像this：

<强> HTML

<button class="bad">click me</button>
<div class="bad"></div>

<button class="good">click me</button>
<div class="good"></div>

<强> CSS

div.bad {
  background: rgba(0, 0, 0, .25);
  height: 100px;
  position: absolute;
  width: 100px;
}

button.bad {
  position: absolute;
}

div.good {
  background: rgba(0, 0, 0, .25);
  height: 100px;
  left: 200px;
  pointer-events: none;
  position: absolute;
  width: 100px;
}

button.good {
  left: 200px;
  position: absolute;
}

和一点 JQuery

$('button').on('click', function() {
  alert('clicked');
});

Answer 3

z-index不适用于具有静态定位的元素添加

position: relative;

到您的链接，你应该没事。

无法单击DIV下的链接

3 个答案: