How do the "cq-Overlay"-divs work in AEM6?

I'm trying to understand more about how the "cq-Overlay"-divs work, so when I have a component and hover over or click it in edit mode I see a blue border. How does the overlay determine what dimensions it has?

For my particular case, I have the problem that the edit overlay is way larger than the actual component, so where ever I click on the page it enables this component. There's no HTML errors, all divs are properly closed and when I inspect the element with Chrome Dev Tools it has just the right size...

// Edit: to narrow it down further, it seems this only happens when the component is included directly in the page template as a resource [1]. Not to go off-topic too much, but I also have another issue with this: The dialog does not open (error 400) since the resource does not exist on the current page. That makes sense as the node with properties 'topbanner' has never been saved. What's a better approach for including components on every page so that the dialog still works even if they have never been configured on that particular page? 

[1] <output data-sly-resource="${'topbanner' @ resourceType='abc/components/modular/topbanner'}" data-sly-unwrap></output>