Question

我正在为我的div创建一个“边框”图像，而不是使它成为边框图像（因为我似乎无法为此图像执行此操作，我正在创建一个单独的图像放置在我的iframe顶部。）

我环顾四周，你不能在内容上放置一个bg图片，所以我不得不使用：

position: absolute;
z-index: 100;

但它仍然不会出现/出现在顶部...

有什么想法吗？这是JSFiddle：http://jsfiddle.net/0hapk48z/5/

Answer 1

这是你的小提琴：

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

我所做的是解决语法错误，并为.border提供1000 px的高度

touch SomeFile.txt

您可以根据需要设置确切的高度

Answer 2

.border { height: 1000px; }没有高度，这就是为什么没有显示的原因。

添加高度并显示。

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

使用图像元素而不是背景图像CSS实际上会更好。这样你就不需要输入高度和宽度，只需加载所提供的自然尺寸：

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

Answer 3

您需要使用display:inline-block收缩包装容器，然后相应地调整容器大小（允许填充图像以正确显示）并在叠加层上使用height:100%。

.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

div中的绝对元素不会出现在其他元素的顶部

3 个答案: