My latest project involves a design editor created using HTML and jQuery, allowing users to add text boxes, images, and more to build up unique designs. The canvas is represented by a bordered div where users can add elements by clicking on buttons that create draggable and resizable divs. It's similar to placing items in Photoshop or Illustrator, or adding text/images in MS Word.
I'm wondering how I can incorporate margin guidelines along the edges of the canvas for visual reference. I want something like gridlines but not a full grid, just simple margin lines half a cm from the edge.
One idea I had was to use a transparent PNG image with margin lines near the edges and stretch it over the canvas using $('#content'). However, any element placed on top of this image would cover the lines. Is there a way to keep these lines visible at all times without obstructing other elements? Increasing the z-index above items on the canvas isn't an option since it would make them unclickable/editable due to the image covering everything.
Keep in mind, these margin lines are purely for visual guidance and don't restrict placement beyond them. Any suggestions on how to achieve this?
Could something like this work:
#content{ border:1px dotted gray; border-position: -5px; }
To shift the content DIV's border inside the DIV rather than at the edge?
Are there alternative methods to implement margin guidelines effectively?