0

次のように、ボディブロックの外側のスカートで、ウェブサイトのコンテンツに紙がクリップされているように見えるように、ウェブサイトに画像を配置しようとしています。

ここに画像の説明を入力してください

私は位置を使用してこの位置を取得することができます：絶対; css属性を選択し、右上の値を使用して画像を配置します。問題は、これが私の家の全画面表示（およびもちろん同じ解像度の他の画面）でのみ機能することです。ウィンドウを絞り込むとすぐに次のようになります。

ここに画像の説明を入力してください

私のcssが指示するので、画像は内側にシフトします。ウィンドウの幅に関係なく、画像を同じ場所に配置するために使用する必要があるCSS属性について誰かが知っていますか？

編集：これは、GeorgeとEdからの入力を使用して解決したCSSです。

#picture-container {
            position: relative;
            max-width: 1px;
            max-height: 1px;
        }

        #image {
            position: absolute;
            right: -932px;
            top: -30px;
        }
4

5 に答える 5

2

追加する必要があります

position: relative;

コンテンツコンテナに移動し、その中に画像を配置します。絶対位置は、ページではなく、そのdivに基づいて決定されます。

于 2013-03-14T15:23:31.000 に答える
2

修正はposition: relative、コンテナに追加して（新しいポジショニングコンテキストを作成して）、それを基準にして画像を配置することです。現在、を基準にして配置しimgていbodyます。

以下のスクリーンショットで、宣言がもたらす違いを示すこのフィドルをチェックしてください。

ここに画像の説明を入力してください

CSSを使用して物事をレイアウトおよび配置することに慣れていることを確認するために、5分を費やしてこれを読むことを強くお勧めします。

于 2013-03-14T15:35:07.183 に答える
0

画像をメインdivの外側に配置するには、右側に負の値を使用します。

 .image{
    position: absolute;
    top: 200px;
    right:-50px;
 }
于 2013-03-14T15:30:08.303 に答える
0

上記の人々が述べたように、それは相対的な位置と関係があります。ただし、静止したままにするには、フローティングであり、通常のコンテンツレイアウトの一部ではないdivを作成する必要があります。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Example</title>
    <style>
        body, html {padding: 0; margin: 0;}
        #wrapper {width: 960px;margin: 0 auto;}
        .floater {height: 100%; width: 100%;position: absolute;}
        .inner-float {position: relative; width: 1020px; margin: 0 auto;text-align: center;}
        .inner-float img {width: 150px; top: -10px; right: 0px;position: absolute;}
        .content {}
    </style>
</head>
<body>
    <div class="floater">
        <div class="inner-float">
            <img src="./clipboard_icon.png" />
        </div>
    </div>
    <div id="wrapper">
        <div class="content">
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
        </div>
    </div>

</body>
</html>

お役に立てれば。

-e

于 2013-03-14T15:53:38.833 に答える
0

パーセンテージを使用できる場合は、オブジェクトを実際に配置したままにする方法があります。本文のCSSを省略しないでください

<body style="padding:0; margin:0">

<div>

<div style="background-color:red; width:100%; height:300px; position:relative;">

<div style="background-color:green; width:100px; height:100px; position:absolute; margin: 10%;"></div>

</div></div>

</body>
于 2015-05-31T09:30:09.800 に答える