CSS Border issues

I've searched the archives to no avail. I am layering some svg images with div tags, and have set borders around the images. They are maps, one is an overview of the larger one set in the upper right corner of the larger one. My overview svg image displays correctly over the top of the larger one, but the border is behind the larger one. I've tried z-index, position: absolute; top: and what not. Any insight would be most appreciated.

Sean

could i see the source to play round with?

The html is first and then the corresponding CSS. I tried adding an overview2 that hasn't helped. Thanks.


<div class="overview">
<embed class="overview2" style ="position: absolute" name="over" src="files/overview/view1.svg" width="137px" height="130px" type="image/svg+xml" />
</div>

<div class="map">
<embed class="map2" style ="position: absolute" name="map" src="files/1.svg" width="646px" height="539px" type="image/svg+xml" />
</div>


.overview {
position: absolute;
border: 3px solid black;
left: 6px;
top: 101px;
width:142px;
height: 135px;
}
.overview2 {
position: absolute; top:
z-index: 9999;
}
.map {
background: white;
border-width: 3px;
border-style: groove;
border-color: silver;
position: absolute;
left: 3px;
top: 98px;
width:652px;
height:545px;
}