Question

我认为图像比文字更好： enter image description here

我想用一个虚假的效果手“抓住”我的网页来构建一个页面。所以当页面滚动时，手会停留在浏览器的左下角。

我认为我的“手”的“固定”位置是我需要的，所以我有这个css：

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

和我的HTML：

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

这很好，除非我决定缩放页面（ctrl ++）导致图像继续遵循其css规则并停留在浏览器的左下角。这导致“手指”与我的文章重叠。

我在这需要什么？

由于

Answer 1

可能使用3个div，滚动页面的绝对定位和手指的固定定位。

这是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

注意

对不起，我没有时间跨浏览器测试代码。我强烈建议你在上市前做一些测试。

css固定元素问题“手持页面”效果

1 个答案: