How to draw line on over all element html

Question

I want to draw a line connect two div and I used a svg with position absolute but the button between two div is can't be click.

How could I draw a line with z-index max, position absolute and it can click on element under this line. If you have any idea it will help me a lot, thank you! this is my example

My code :



 div1 


 

 div3 

```

user_6304170 · Answer

You can add pointer-events:none to the svg element.
It may be better to use a transformed div with height:1px instead of an 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;
}

user_16331715 · Answer

Try to give the SVG element z-index:-1 and the button will be click

Just add the following code to your CSS

svg{
  z-index: -1;
}

user_16408542 · Answer

add button's style -> position:fixed

How to draw line on over all element html

3 Answers