Question

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

功能区是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 */
}

有什么想法吗？

Answer 1

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

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

示例jsFiddle

Answer 2

提供您的内容div

position: relative

和你的功能区

position: absolute
right:0

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

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

CSS - 图像是否可以重叠页面边框而不影响页面宽度？

2 个答案: