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 を使用することで、水平スクロールバーに影響を与えずに画像を適切な場所に配置することができました。センター)、しかし、画像の 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

画像がページの境界を拡張しているように聞こえ、水平スクロール バーが発生します。これを修正する 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 に答える