div中的绝对元素不会出现在其他元素之上

Question

I'm creating a "border" image for my div and instead of making it a border image (because I can't seem to be able to do it for this image, I am creating a separate image to be placed on top of my iframe.)

I've looked around and you can't place a bg image ontop of the content so I had to use:

position: absolute;
z-index: 100;

But it still won't appear / appear on top...

Any ideas? Here is the JSFiddle: http://jsfiddle.net/0hapk48z/5/

Answer 1

Here you are your fiddle running:

http://jsfiddle.net/0hapk48z/9/

What I made is to solve syntax errors and give to .border a height of 1000 px

 .border { height: 1000px; }

You can put the exact height do you need

Answer 2

.border has no height which is why nothing is displaying.

Add a height and it displays.

http://jsfiddle.net/0hapk48z/8/

You would actually be better using an image element instead of background-image CSS. That way you don't need to enter the height and width, it should just load at the natural dimensions supplied:

http://jsfiddle.net/0hapk48z/14/

Answer 3

You need to shrink wrap the container with display:inline-block then size it accordingly (allowing padding for the image to display properly) and use height:100% on the overlay.

.votd {
  padding: 0;
  width: 860px;
  text-align: center;
  position: relative;
  display: inline-block;
  padding-top: 34px;
  padding-bottom: 22px;
}
.border {
  width: 860px;
  position: absolute;
  background: url(http://i.imgur.com/16pm0Ms.png);
  background-repeat: no-repeat;
  z-index: 100;
  height: 100%;
  top: 0;
  left: 0;
}

iframe {
  width: 800px;
  height: 600px;
  border: 2px solid darken(#CFBA6B, 20);
  margin: 0 auto;
  display: block;
}

JSfiddle Demo