I was wondering if it's possible to stack images on top of each other in html so that the position of the images stacked on top are relative to the bottom image, instead of being relative to the screen edges (eg, 100 pixels above bottom of screen, 200 pixels left, etc)? I want to create a simple image menu like this:
Where I have one large image on the bottom, and three image-links on top of it, aligned so that they're always in the same spot relative to the base image no matter what the computer screen resolution is. If I make them relative to the screen edges then computers with different resolutions would display the images out of order.
I'm pretty new to html, using Adobe Dreamweaver CS5.5 at the moment. This is what I have so far:
<LINK href="style.css" rel="stylesheet" type="text/css">
<!-- Layering priority low -->
<p><img src="pictures/baseimage.png" alt="baseimage" align="middle"/></p>
<!-- Layering priority high -->
<p><img src="pictures/button1.png" alt="button1" align="middle"/></p>
<p><img src="pictures/button2.png" alt="button2" align="middle"/></p>
<p><img src="pictures/button3.png" alt="button3" align="middle"/></p>
Quite obviously it's not right as I have no idea how to set the buttons so they are "X pixels from the top/bottom/left/right of the base image".