2

幅 960 ピクセルの Web サイトがあり、右側にその外側に画像を配置したいと考えています。

Vimeo のホームページでそれが行われました: http://vimeo.com 画面に水平スクロールバーが表示されることなく、Web サイトの幅の外に突き出た折り紙の鳥の絵を見ることができます。

彼らはどのようにこれを行うのですか?!

Vimeos レイアウトの外に浮かぶ折り紙の鳥

4

3 に答える 3

2

新しい答え:

さらなる調査の結果、重要な点は、ボックス/画像では水平スクロール バーが表示されず、コンテンツでは表示されることだったようです。これは vimeo によって適用された興味深いトリックであり、非常に卑劣でした。

これは、 onと、ボックス/画像の直接の親ではない onmin-widthの組み合わせと関係がbodyあります。、および負の とoverflow-x: hidden組み合わせると、目的の結果が得られます。position: absoluteright

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;
}

これが、負のマージンと相対的な位置付けが存在する理由です。物が通常ある場所に対して相対的に移動すること。

于 2012-06-14T15:58:36.853 に答える
0 
.your_picture {
  position:absolute;
   /* this needs to be negative to have the image sticking outside of the width */
  right:-30px;
}
于 2012-06-14T03:11:43.393 に答える
0 
#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>
于 2012-06-14T03:56:02.233 に答える