I am trying to surround any clicked Div with 8 tiny Divs with the ids of nw, n, ne, w,e, sw, s, and se. These tiny Divs will serve as drag handles and will be removed when the drag action ends.
I’m having a difficult time placing them around the clicked Div. I have set their display as inline-block and their position as absolute. I’ve also set their left and top coordinates programmatically they appear where I expect them to.
The problem is I’ve read somewhere that display:inline-block and position:absolute don’t make sense together but for some reason they seem to work in my situation. Please recommend a better CSS if what I have thus far are incorrect.
I’m not into javascript, but I’m OK as CSS, but this seems more an issue of CSS anyway.
One problem with inline-block may be the vertical alignment. Also, you are not looking for inline behavior here, so using it makes no sense, block would be the natural choice and default for divs.
To me the boxes don’t seem to line up the same, is that really how you want them?
The inline-block has no effect in your example. Just remove it and you will see. (This is not relevant in your case but if you weren’t specifying co-ordinates then then you may find that auto positioned absolute elements may differ in their position if they were originally inline or inline-block elements but the position:absolute will render them as block elements at the position they would have been in the flow.)
When position is set to absolute the computed value of display will be ‘block’ even if you have set inline-block so there’s no point adding it.
As an aside please its best not to use position:relative with co-ordinates to make structural movements as the element only gets moved visually and not physically. Generally that is not what you want as it will leave holes in the page where the element originally resided. If you want overlapping effects without changing the flow of the document then position:relative is ok but 99% of the time you probably should have simply used a margin.
(This is not relevant in your case but if you weren’t specifying co-ordinates then then you may find that auto positioned absolute elements may differ in their position if they were originally inline or inline-block elements but the position:absolute will render them as block elements at the position they would have been in the flow.)