Absolutely positioned outside of AP Parent for mapping
I am developing a simple mapping application for a client which uses XML, CSS and jQuery. I have the basic functionality working but am a bit stumped by one thing. The "map" is a large image with overflow set to hidden. Then by reading the XML the jQuery places "zones" (a
tags) on the image positioning them absolutely to the parent map.
This zone the contains two absolutely positioned elements, which need to extend out of their parent. Works exceptionally in Chrome, Firefox and Safari, but IE clips anything that goes over the parent. code looks something like the following.
<div style="overflow:hidden; width:800px; height:600px;">
<div style="width:1600px; height:1200px; position:relative"><!-- missed out of original post -->
<div style="position:absolute; left:10px; top:10px; width:100px; height:100px; z-index:10">
<a href="#" style="position:absolute; left:80px; top:80px; width:100px; height:30px; z-index:20"> </a&开发者_JAVA技巧gt;
<a href="#" style="position:absolute; left:-10px; top:90px; width:10px; height:100px; z-index:30"> </a>
</div>
</div>
</div>
Is the clipping normal behaviour or is there something I am missing?
EDIT: I missed the main map div
out of the original post.
I apologise about this but I have answered my own question. The problem had nothing to do with my css or html it was to do with my javascript.
What I was doing was using the fadeTo function to hide all of the elements on the map, including the zones themselves, then when redrawing the zones and their contained elements IE was clipping the images.
The problem was rectified by removing the fade on the zone div and just fading the inner bits. It now works like a charm.
$('div > div > div, div > div > div *').fadeTo('slow', 0);
//this is now
$('div > div > div *').fadeTo('slow', 0);
Example applied to above, I'm using classes and id's in the actual code.
Sorry for the waste of time
James
精彩评论