如何使 div 中的链接在另一个 div 下可点击，但不更改 div 宽度？答案

【问题标题】：How to make link in div clickable under another div, but do not change div width?如何使 div 中的链接在另一个 div 下可点击，但不更改 div 宽度？
【发布时间】：2021-09-14 13:41:05
【问题描述】：

如何使 div 中的 link-1 在另一个 div 下可点击，但不更改 div 宽度？

div {
width: 100%;
border: 1px solid black;
}

div:nth-child(1) {
position:absolute;
top:0px;
}

div:nth-child(2) {
text-align: right;
position:absolute;
top:0px;
right: 30px;
}

<div>
<a href="http://link">Link-1</a>

</div>

<div>
<a href="http://link">link-2</a>

</div>

【问题讨论】：

你的意思是把两个链接放在同一个div中？
不，链接应该保留在不同的 div 中，但可以点击
问题是因为您将绝对位置添加到 div's/ 所以它们将相互重叠，因此一次只能点击一个

标签： html css hyperlink z-index clickable

【解决方案1】：

在您当前的代码中，两个 div 都是绝对定位的，因此第二个 div 与第一个 div 重叠。要将两个 div 放在一起，最好使用flexbox。这样，您可以向每个不重叠的 div 添加内容。

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
 }
 
 .container div {
  width: 50%;
 }
 
 div:nth-child(2) {
  text-align: right;
 }

<div class="container">
  <div>
    <a href="#">Link 1</a>
  </div>
  <div>
    <a href="#">Link 2</a>
  </div>
</div>

【讨论】：

【解决方案2】：

你有一个问题，div 相互覆盖，这有点不可能，我会将它们放在一个容器中并制作两个列，这样你仍然有它周围的边框

【讨论】：