我想画一条线连接两个div，我使用了位置绝对的svg，但是两个div之间的按钮不能点击。
我怎么能画一条z-index max, position absolute的线，它可以点击这条线下面的元素。如果你有任何想法，它会帮助我很多，谢谢!这是我的例子
我的代码:<html>
<body>
<div style="border: solid; width: 150px;height: 150px;"> div1 </div>
<svg height="210" width="500" style="position: absolute;">
<line x1="50" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
<div style="border: #3F3F3F;width: 150px;height: 150px;display: flex;align-items: center;justify-content: flex-end;">
<button>button </button>
</div>
<div style="border: solid;width: 150px;height: 150px;top: 360px;position: absolute;left: 169px;"> div3 </div>
</body>
</html>```
-
您可以将
pointer-events:none添加到svg元素 -
最好使用height:1px的div而不是svg:
.container {
position: relative;
}
.rect {
width:200px;
height:200px;
position:absolute;
border: solid 1px black;
box-sizing: border-box;
}
#rect2 {
left:350px;
top: 400px;
}
.line {
width: 400px;
height:1px;
background:red;
position:absolute;
transform:rotate(30deg);
transform-origin:0 0;
top:200px;
left:100px;
}
button {
position: absolute;
top:280px;
left: 220px;
}<div class="container">
<button>Click me</button>
<div class="rect" id="rect1"></div>
<div class="rect" id="rect2"></div>
<div class="line"></div>
</div>尝试给SVG元素z-index:-1，按钮将被点击
只需将以下代码添加到您的CSS
svg{
z-index: -1;
}
add button style ->位置:固定