0

我的初始页面概念中有以下元素：

http://tinyurl.com/bcmcxp9

功能区是 PNG 图像。我想要做的是将此图像精确定位在框阴影 div（表示页面内容）的边框上，而不会影响页面宽度。

我尝试了几种技术。

通过使用 position:absolute，我已经能够实现我想要的视觉效果，但是它带来了可怕的水平滚动条！我希望div的边缘（不是图像的边缘）代表页面的边缘。

#banner-ribbon {
    background-image: url(ribbon-right.png);
    background-repeat: no-repeat;
    position: absolute:
    width: 419px;
    height: 114px;
    left: 700px;
    top: 400px;
}

通过使用位于内容包装器和背景之间的 div，我能够在不影响水平滚动条的情况下将图像定位在正确的位置（有点，我可能需要一些 javascript 来相对于中心），但我不能将图像的 z-index 提高到其子 div 之上！

#banner-ribbon-wrapper {
    background-image: url(ribbon-right.png);
    background-repeat: no-repeat;
    background-position: 90% 400px;
    z-index: 70; /* does nothing */
}

有任何想法吗？

4

2 回答 2

1

听起来图像正在扩展页面的边界，从而导致水平滚动条。解决此问题的一种方法可能是为页面设置宽度，然后隐藏超出页面的任何内容。这样的事情可能对你有用：

body {
    width: 100%;
    overflow-x: hidden;
}

示例jsFiddle

于 2013-02-24T12:17:56.577 回答
0

给你的内容 div

position: relative

和你的丝带

position: absolute
right:0

确保您的图像不会不受控制地扩展边界。

JsFiddle 上的工作示例：http: //jsfiddle.net/BrvJk/

于 2013-02-24T12:18:37.923 回答