浮动网站宽度以外的内容

Question

我的网站宽度为960像素，想在右边放一张照片。

Vimeo已在主页上完成了这项工作：http://vimeo.com 你可以在网站宽度之外看到折纸鸟的图画 不会导致屏幕获得水平滚动条

他们是如何做到的？！

origami bird Floating outside of Vimeos layout

Answer 1

新答案：

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

它与min-width上的body和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;
}

这是一个最小的小提琴，其轮廓使您可以看到正在发生的事情：http://jsfiddle.net/rUj8s/2/

原始答案：

position: absolute答案很可能会有效，但也会将image / 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>