HTMLページ上にGIFイメージを浮動させる

Question

ユーザーのスクロール場所に関係なく、ページの中央にGIFを置いておきたい。私はそこにあるのではなく、イメージが「ページの上に浮いている」という錯覚が欲しいと思っています。

私はCSSがこれをやり遂げる方法だろうと思いますか？画像をfoo.gifとすると、CSSはこれをどうするのでしょうか？

Answer 1

より具体的な何をしたいの指導、そしてその理由がなければ、私が提供できる最高のは、次のとおりです。

img { 
    position: fixed; /* forces the element to stay fixed in relation to the viewport */ 
    top: 50%; /* sets the top of the image 50% of the page height */ 
    left: 50%; /* sets the left side of the image 50% across the page */ 
    margin-left: -100px; /* moves the image half of its own width to the left-side of the page */ 
    margin-top: -93px; /* moves the image half its height 'up' the page */ 
    box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating' 
    border-radius: 1em; 
} 

JS Fiddle demo。

Answer 2

position:absoluteをposition:fixedに変更すると、iizのソリューションと動作します。

私はあなたが見るためにjsfiddleを作成しました。

また、画像を「浮動」にするためのドロップシャドウ（from here）も含まれています。

それはすべてのビットが一緒に貼り付けられたのですが、それは動作しますし、あなたが望む任意の方法でそれを変更することができます...