Offset seems to be drasticly different per item i click - html

Question

I have been working with creating a selection box around some cells, The selection box is absolute so it can reach everywhere it needs to, to create a click and drag box around some cells.
It seems that based on the mousedown event, the position of the box is set correctly for class hour but not for half-hour. While it is the same code, hour offset will return me the corrdinates of the item. relative to the doc, whereas the half-hour will return approx (0,6) which sets the top:left to the upper right corner.
Right now, my dom looks like this:
<div class="row">
<div class="cell hour">
<div class="half-hour"></div>
<div class="half-hour"></div>
</div>
</div>
and the CSS is:
.hour{
position:relative;
}
.half-hour{
display:inline-block;
float:left;
width: 50%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: solid 1px black;
width: 20px;
text-align: center;
cursor: pointer;
}
From what it looks like is that the offset I am getting when selecting the half-hour is the offset to the parent hour and the hour i think is getting his relative to the page?
After looking at these, I was thinking that setting half-hour to: *position:relative;` might do the trick, but it didnt do anything. it is the same.
I am thinking i need to modify something. im just not sure what.
I will eventually be doing this same design for a class called: quarter-hour which will have 2 in each of the half-hour divs.
Edit based on the question below, I just have a simple: ` which is on the page, and then on mousedown it would:
1- Set Top:Left values based on mouse.target.offsetTop && mouse.target.offsetLeft respectively.
2- Set position absolute (though it should be already)
3- set dimensions, Height and Width accordingly.
Edit 2 I managed to recreate my issue with this fiddle https://jsfiddle.net/838vqboe/ I am currently giving 3 options in the DDL. Hour works as expected, but not HH or QH.

Answer 1

I ended up coming up with a solution which worked in Javascript, but when converting it to Dart, specifically with Polymer, the concepts behind shadowdom was alien to me. This I think is the issue I was having as it was determining a local root it was applying positions to while the mouse gave me positions in relation to the screen.
To resolve this, I noticed that something which extends PolymerElement has get getBoundingClientRect(), so i ended up doing something like the following in javascript:
var _mouseDown = function(e){
var selectedHtml = e.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top
_selectionDiv.css({left:left, top:top});
}
$selection.on("mousedown", _mouseDown);
and in Dart:
Function _mouseDown(MouseEvent mouse){
HtmlElement selectedElement =- mouse.target;
var left = selectedHtml.getBoundingClientRect().left - getBoundingClientRect().left;
var top = selectedHtml.getBoundingClientRect().top - getBoundingClientRect().top ;
_selectionDiv.style.top = "${top}px";
_selectionDiv.style.left = "${left}px";
}