css - オーバーフロースクロールバーをトリガーせずに、この画像をビューポートから作成するにはどうすればよいですか？

Question

ページの右側に画像を配置できない状況があります。ビューポートの領域が必要なスペースよりも小さい場合、ウィッチがブリードアウトします。

HTML

<div class="relative-container">
<div class="content1">
    <p>Lorem ipsum dolor sit amet</p>
    <img alt="" src="http://placehold.it/64x64" />
    <p>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos <strong>the right image is supposed to come under this paragraph, just a little</strong>.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>
<div class="content-outofport">
    <img alt="" src="http://placehold.it/128x64/f00000/000/&text=out%20of%20port" />
</div>
<div class="content2">
    <img alt="" src="http://placehold.it/64x64" />
    <p><strong>This paragraph won't be affected by imge position</strong>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos mauris porta semper, habitant at mi vulputate. Eget parturient. Suspendisse donec ante est nullam magna, nisl leo vitae vitae. Sequi nec lacinia dui magna, accumsan justo augue, sed nunc penatibus commodo. Porttitor vestibulum nibh, donec at nunc eros vitae mollis.</p>
    <img alt="" src="http://placehold.it/64x64" />
</div>

CSS

.relative-container {
    position:relative
}
.content1 {
    border:2px solid #fee;
    z-indez:1
}
.content2 {
    border:2px solid #eef;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-indez:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
}
.content-outofport img {
    position:absolute;
    right:-110px;
    top:-111px;
}

jsFiddle：http://jsfiddle.net/zUaAq/1/

SOから、それらは役に立ちませんでした：

• スクロールバーをトリガーせずにビューポートの外側にオーバーフローする可能性のある要素を配置しますか？
• ブラウザがビューポートを拡張することなく、要素を画面の外にプッシュするにはどうすればよいですか？
• cssのみを使用して、ブラウザのビューポートのすぐ上に要素を配置するにはどうすればよいですか？

最初は、JavaScriptを避けたい

jsFiddleの例では、赤み<div>が表示されていないはずです。

実際の開発コンテキストでは、<div class="content-outofport">管理可能なのはのみです（html書き込みアクセス権がありますが、.cssを適用する以外は、htmlマークアップから他の要素を移動/フォーマットすることはできません）。

頭のかゆみ？

Answer 1

http://jsfiddle.net/zUaAq/4

.relative-container {
    overflow: hidden;
}

可能な場合はページに赤い画像を保持するというアイデアの場合は、次のようにします。

http://jsfiddle.net/zUaAq/6/

.content-outofport img {
    left: 400px;
}

もちろん、画像とコンテナの幅に応じて、左の位置を設定することをお勧めします。

Answer 2

ユーザーisherwoodが私に適切な答えを教えてくれました。

HTMLは同じです

CSS

.relative-container {
    position:relative;
    /* THIS WAS IT and ONLY IT */
    overflow: hidden;
}
.content1 {
    border:2px solid #fee;
    z-index:22;
    position:relative;
}
.content2 {
    border:2px solid #eef;
    position:relative;
}
.content-outofport {
    background-color:#fcc;
    border:2px solid #efe;
    height:64px;
    position:relative;
    right:0;
    z-index:0;
    overflow:visible;
    margin-right:111px;
    right:0;
    width:100%;
    min-width:777px;
    max-width:999px;
    right:0;
}
.content-outofport img {
    position:absolute;
    right:0px;
    top:-141px;
}

このjsFiddleに示されているように