I am looking at this fiddle: http://jsfiddle.net/kDs2Q/45/
Is there a way to layer the divs/line in a way so that the line will be behind the other divs? I want to be able to draw the line from the center of one div to the center of the other but not see the line cross over the actual boxes.
This is how I would to the center-to-center:
var off1 = getOffset(div1);
var off2 = getOffset(div2);
var x1 = off1.left + off1.width/2;
var y1 = off1.top + off1.height/2;
var x2 = off2.left + off1.width/2;
var y2 = off2.top + off1.height/2;
First, put a <hr> tag between the two divs, and the second is to place any block-level element such as a div, p, etc, between the two divs and apply a bottom or top border on it.
Use the “br” tag to make a new line. Example : <div>A new line will be below</div> <br>
Similarly, you can align a DIV element vertically in the middle of a containing element by using the class d-flex in combination with the class align-items-center, like this: To make a vertical line, use border-left or border-right property.
Yes use z-index in your style.
z-index:-1
JSFiddle http://jsfiddle.net/D24uC/
Use z-indexes, the DIVs need to have a higher z-index than the 'line-div'.
Give it a try, set the DIVs z-index to 1000 or something and see the result:
http://jsfiddle.net/kDs2Q/884/
<div id="div1" style="position:absolute; z-index:1000; background-color:blue; width:100px; height: 200px;top: 200px; left: 100px;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With