css - 将内容浮动到网站宽度之外

Question

我有一个 960 像素宽的网站，想在右侧放一张图片。

Vimeo 已经在主页上完成了它：http: //vimeo.com 你可以看到一张折纸鸟的图画，它停留在网站宽度之外，而不会导致屏幕出现水平滚动条

他们怎么做到的？！

漂浮在 Vimeos 布局之外的折纸鸟

Answer 1

新答案：

经过进一步调查，似乎一个关键方面是框/图像不会导致水平滚动条，而内容会。这是 vimeo 应用的一个有趣的技巧，而且非常偷偷摸摸。

它与盒子/图像的非直接父级min-widthonbody和on 的组合有关。overflow-x: hidden当与position: absolute, 和负数结合使用时，right可以达到预期的结果。

HTML：

<div id="wrap">
    <div id="width_wrap">
        <div class="crane"></div>
    </div>
</div>​

CSS：

body
{
    min-width: 960px;
}

#wrap
{
    overflow-x: hidden;
}

#width_wrap {
    position: relative;
    width: 960px;
    height: 400px;
}

.crane
{
    position: absolute;
    width: 200px;
    height: 200px;
    right: -40px;
}

这是一个最小的 Fiddle，带有轮廓，您可以看到发生了什么：http: //jsfiddle.net/rUj8s/2/ ​</p>

原答案：

答案很可能会position: absolute起作用，但也会使图像/ div 脱离文档的正常流程。这可能不是你想要的。

您可能想要的是否定的margin-right：

.your_picture {
    margin-right: -30px;
}

或者，也许position: relative和一个否定的right

.your_picture {
    position: relative;
    right: -30px;
}

或者，最后，position: relative和一个积极的left

.your_picture {
    position: relative;
    left: 30px;
}

这就是存在负边距和相对定位的原因。相对于它们通常所在的位置移动物体。

Answer 2

.your_picture {
  position:absolute;
   /* this needs to be negative to have the image sticking outside of the width */
  right:-30px;
}

Answer 3

#parentDiv{
  position: relative;
}

#your_picture {
  position:absolute;
  right:-30px; /*change it to a number that you like */
  top: 30px; /*change it to a number that you like */
}

html 标记会像：

<div id="parentDiv">
   <div id="your_picture"></div>
</div>