Question

I have created a speech bubble as an absolutely positioned element which I hope to make sit outside of it’s wrapper.

I’ve managed to position the div in the correct place, however the content outside of the div is being clipped.

I used overflow:visible to try and make it show but it doesn’t seem to be correct?

CSS

#bubble{
width:201px;
height:189px;
position:absolute;
left:-87px; 
bottom:0; 
z-index: 99;
overflow:visible;
}

HTML

 <!-- Speech bubble-->
<div id="bubble"><img src="images/hire_me_bubble.png" 
                 alt="Hire me" />
</div>

Live site – bubble in question can be seen in lower contact section

Answer 1

The cause of the clipping seems to be one of the divs containg it: #contactwrapper. It has overflow set to hidden. Setting it to visible, causes it to become fully visible, but moves it due to the readjusting of its parent container.

Once it’s visible, you can either just reposition it absolutely (which I don’t recommend), or try adjusting the parents size, and floating.

I hope this helps! 🙂