I’ve got a div with it’s overflow set to auto, inside this there’s another ten divs with their position set to relative, each of these has a span inside them that shows when you hover over the icon. All this works great apart from the last one which is cut off due to the grandparent divs overflow. My question is how do I stop this and allow the last span to be shown?
Try not using top or bottom co-ordinates on the absolute element and then the element will appear at its natural position in the flow. You can move it around with margins. You won’t need the position:relative on the parent or on the overflow div then.
However it does depend on exactly what you are doing with it and en example for us to work with would help
they KEY here is: give containingDiv relative position…and have NO OTHER descendants of containingDiv have relative or absolute position until .Options a:hover span. Options a:hover span will then be placed in the same layer as the containingDiv and thus be outside the overflow hidden given to .searchBox.
I don’t think you can solve this without scripting of some sort.
Dresden’s example above will always place the hover element at the top of the div and assuming this is just a small demo and the real layout is much taller then the element will be a long way from its trigger.
The last element is not really cut off anyway as you can still scroll the container to see the full text (just as you will for the first item).
You can make the hover element appear outside of the div by not using co-ordinates as I mentioned earlier but the problem is that the element will show further down the page each time you scroll.
Assuming this is part of a taller div then I would just set the last item to display:upwards to avoid this issue.