CSSの固定要素の問題効果

私はイメージが言葉よりも優れていると思う： enter image description here CSSの固定要素の問題効果

私は偽の効果手でページを作成したいページ間、私のwebpage.Soを「保持」ブラウザの左下隅にあるハンドステーをスクロールします。

.class-applied-to-my-hand-image{ 
position:fixed; 
bottom:0; 
    left:0; 
}

と私のHTML：：

は私が私の "手" のための "固定" の位置を考えて、私はこのCSSを持っているので、必要になるものです

[..] 
<body> 
<img src="fingers.png" class="class-applied-to-my-hand-image"/> 
<div class="scrolling-page"> 
    [..] 
</div> 
<body>

これは結構ですIない限り、ページをズームすることを決定する（ctrl ++）ので、イメージはCSSのルールに従い続け、ブラウザの左下隅にとどまります。これにより、「指」が自分の記事と重なってしまいます。

ここで必要なものは何ですか？たぶん3つのdivを、スクロールページや指のための固定された位置決めのための絶対位置を使用して

おかげ

出典

2011-07-10 luca

。

これは、CSSです：

 <style type="text/css" media="screen"> 
     /* Reset (Eric Meyer) v2.0 | 20110126 */ 
     .... 
     /* Fingers css rules */ 
     div#wrapper{position:relative;} 
     div#fingers{position:fixed;bottom:0;left:0;width:25%;z-index:99;} 
     div#fingers img{max-width:100%;min-width:100%;} 
     div#scrolling_page{position:absolute;top:0;left:15%;width:50%;margin:0px auto;border: 1px solid #999;z-index:98;padding:20px;} 
     </style>

そして、これはHTMLです：

<div id="wrapper"> 
     <div id="fingers"> 
     <img src="fingers.png" alt="fingers"/> 
     </div> 
     <div id="scrolling_page"> 
     <!-- a lot of text paragraphs here --> 
     <p>...</p> 
     </div> 
</div>

私は順番に、いくつかの白い背景を削除し、PNGに変更する、小さな指の画像を微調整する必要があります透明性を有すること。あなたがソースコードを参照して、ページにhere

をズームしてみてください NOTE

は、私は申し訳ありませんが、私は、クロスブラウザテストコードに時間がありませんでした。私はあなたが公開する前にいくつかのテストをすることを強くお勧めします。

出典

2011-07-10 18:34:15 microspino

あなたの例のscrolling_page divと画像は重複していません。どのように4本の指を隠した状態で「ハンドバック/ペーパーフロント」の効果を作りますか？サムの背後にあるスクロールページのdivの左灰色の境界線はどうですか？ありがとう – luca

@lucaあなたのコメントから始まる更新されたコード（BTW l'url del tuo sitoèsplendida）。 – microspino

絶対位置を指定して "finger" divのように見えるコードを見るだけです。画面の左下に固定されません。（grazie ma il merito va ai nostri politici soprattutto！per spunto.Diciamo 。） – luca

CSSの固定要素の問題効果

答えて

関連する問題