Появляющаяся кнопка «Наверх» с помощью CSS

Контейнер-кнопка «button»
Контейнер-крышка «cap»
Пример

Чтобы сделать появляющуюся кнопку «Наверх» с помощью CSS, воспользуемся свойством z-index — спрячем кнопку за неподвижной областью, размером немного большим самой кнопки, фон которой будет таким же, как и фон сайта.

Контейнер-кнопка «button»

Создаём контейнер с кнопкой:
```
<a href="#" class="button"></a>
```

Пишем для него стили:

.button {
	display: block;
	background: url(путь+к+изображению) center no-repeat;
	height: 32px; width: 32px;
	position: fixed; bottom: 10px; right: 10px;
	z-index: 1;
}

display: block;: определяем, что отображать данную ссылку нужно как блок.
background: url('путь+к+изображению') center no-repeat;: делаем кнопку фоном блока, указывая браузеру, что его нужно поместить в центре и не повторять.
height: 32px; width: 32px;: высота и ширина блока соответственно (их берём исходя из размеров изображения кнопки).
position: fixed; bottom: 10px; right: 10px;: фиксируем блок и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 1;: помещаем блок на 1-ый уровень.

Контейнер-крышка «cap»

Контейнер-крышка будет закрывать кнопку, если страница помещается в окно браузера и скроллинга нет.

HTML:
```
<div class="cap"></div>
```

CSS:

.cap {
	background-color: цвет+фона+сайта;
	height: 32px; width: 32px;
	position: absolute; bottom: 10px; right: 10px;
	z-index: 2;
}

background-color: цвет+фона+сайта;: устанавливаем фон блока таким же, как и фон сайта.
height: 32px; width: 32px;: высота и ширина блока соответственно (их берём также исходя из размеров изображения кнопки или чуть больше).
position: absolute; bottom: 10px; right: 10px;: делаем блок не фиксированным как предыдущий, а абсолютно позиционированным и располагаем его на расстоянии 10px от нижнего края браузера и 10px от правого.
z-index: 2;: помещаем блок на 2-ой уровень, то есть выше блока с кнопкой.

Пример

25.04.2014