Q: Position div's relative to eachother without parenting So I'm trying to build a tree-like UI out of Nodes represented by divs that can be connected by clicking on a socket and dragging to the socket of another node. The node looks like this:
<div class="node">
    <div class="upper-socket" />
    <div class="lower-socket" />
</div>

.node {
    position: relative;
    // other properties
}

.socket {
    position: absolute;
    // other properties
}

I'm using JQuery draggable to make the parent node draggable. But when the user drags from the socket, I want a path to be drawn using svg. For example, I want the user to be able to click from the bottom node of A to the top node of B and establish a connection. Instead, the socket inherits the draggable properties of the parent. How can I fix this?


A: Depending on how you're laying this out, you could use relative positioning on divs which are adjacent to each other. That could work, depending on what you're trying to do.
You may also try float: left. That could be the answer.
Third, I may suggest changing the display of your div through CSS. If you did something like "display: inline-block", it would position it next to others.
If these don't help, I'd suggest posting an illustration. It would help convey your concept.
