Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing Lines Behind Divs

Tags:

javascript

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;
like image 837
Lipee Avatar asked Jul 23 '14 20:07

Lipee


People also ask

How do you put a line between divs?

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.

How do I draw a line between two divs in HTML?

Use the “br” tag to make a new line. Example : <div>A new line will be below</div> <br>

How do you draw a line in the middle of a div?

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.


2 Answers

Yes use z-index in your style.

z-index:-1

JSFiddle http://jsfiddle.net/D24uC/

like image 152
Cheruvian Avatar answered Oct 20 '22 14:10

Cheruvian


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;">
like image 37
Tom Avatar answered Oct 20 '22 14:10

Tom