Исправлена ​​ошибка с фиксированными элементами CSS в эффекте «hand holding-page» - PullRequest
Новая
       35

Исправлена ​​ошибка с фиксированными элементами CSS в эффекте «hand holding-page»

2 голосов
/ 10 июля 2011

Я думаю, что изображения лучше, чем слова: 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 и остается в левом нижнем углу браузера. Это приводит к тому, что «пальцы» перекрывают мои статьи.

Что мне здесь нужно?

Спасибо

1 Ответ

0 голосов
/ 10 июля 2011

Возможно использование 3 делений, абсолютное позиционирование для страницы с прокруткой и фиксированное позиционирование для пальцев.

Это 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, чтобы иметь прозрачность.Вы можете увидеть исходный код и попробовать увеличить страницу здесь

ПРИМЕЧАНИЕ

Извините, но у меня не было временикросс-браузерный тест кода.Я настоятельно рекомендую вам сделать тест перед публикацией.

...