CSS: How to attach an arrow to a div and make it overlap the border

Question

I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.

Answer 1

Try this:

HTML

CSS

.info-popover {
    position: relative;
    /* any other CSS */
}

.arrow {
    background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
    height: 15px;
    width: 20px; /* width of arrow image? */
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}