Question

我最近开始编程，我正在尝试为客户提供按钮，但该按钮无法正常工作。也许有些人可以帮助我

.areacliente {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 15px;
  top: 13px;
  width: 130px;
  margin-top: -10px;
  text-align: right;
  transition: .3s;
  cursor: pointer;
}

.btn {
  border: 1.2px solid #8e44ad;
  border-radius: 8px;
  background: none;
  padding: 5px 10px;
  font-size: 14px;
  margin: 5px;
  color: #9b59b6;
  list-style: none;
}

.btn li a {
  text-decoration: none;
  cursor: pointer;
}

<div class="areacliente">
  <ul class="btn">
    <li><a href="#">Client Area<i id="lock"class="fas fa-user-lock"></i></a></li>
  </ul>
</div>

Answer 1

.areacliente {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 15px;
  top: 13px;
  margin-top: -10px;
  text-align: right;
  transition: .3s;
  cursor: pointer;
}

.btn {
  border: 1.2px solid #8e44ad;
  border-radius: 8px;
  background: none;
  padding: 5px 10px;
  font-size: 14px;
  margin: 5px;
  color: #9b59b6;
  list-style: none;
}

.btn li a {
  text-decoration: none;
  cursor: pointer;
}

<div class="areacliente">
  <ul class="btn">
    <li><a href="https://stackoverflow.com/">Client Area<i id="lock"class="fas fa-user-lock"></i></a></li>
  </ul>
</div>

我认为左侧空间有问题。所以宽度：100px；仅使用删除另一宽度：130px

 .areacliente {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 15px;
  top: 13px;
  width: 130px;
  margin-top: -10px;
  text-align: right;
  transition: .3s;
  cursor: pointer;
}

Answer 2

您的问题是您的nav浮动在“客户区”按钮的顶部，因此您可以单击它。要解决此问题，您需要更改此按钮的z-index：

.areacliente {
    position: absolute;
    right: 15px;
    top: 13px;
    width: 130px;
    margin-top: -10px;
    text-align : right;
    transition: .3s;
    cursor: pointer;
    z-index: 1; /* Add this */
}

这会将按钮带到nav上方，因此您现在可以单击它。

请参见this fiddle中的工作示例。

为什么我的CSS中的光标不起作用？

2 个答案: