Являются ли изображения с фиксированным положением тем, что мне нужно?

Question

У меня возникли проблемы с некоторыми изображениями с фиксированным / абсолютным позиционированием.

См. Пример для справки: http://www.warface.co.uk/clients/warface.co.uk/

В данный момент они правильно расположены, но когда пользователь щелкаетКрасное поле со стрелкой (вверху по центру) вы заметите, что неподвижно расположенные изображения статичны и не скользят по странице по желанию.Я уверен, что они должны располагаться относительно, но все они, кажется, прыгают вокруг, когда размер браузера изменен.

Любые идеи по предлагаемым методам высоко ценятся:)

Большое спасибо

CSS

.minipeak {
    background: url("styles/images/home-peak2.png")no-repeat 0 0;
    width:206px;
    height:138px;
    display:block;
    float:right;
    top:288px;
    right:91%;
    position: fixed;
    z-index: 0;
    }
.twinpeaks {
    background: url("styles/images/home-peaks.png")no-repeat 0 0;
    width:624px;
    height:349px;
    display:block;
    position:fixed;
    float:left;
    left:56%;
    top:220px;
    z-index: 0;
    overflow: hidden;
    }
.riflebg {
    background: url("styles/images/home-rifle2.png")no-repeat 0 0;
    width:254px;
    height:199px;
    display:block;
    top:110px;
    left:330px;
    position: relative;
    float:left;
    z-index: 1;
    }
.tank { 
    background: url("styles/images/home-tank.png")no-repeat 0 0;
    width:520px;
    height:285px;
    display:block;
    top:150px;
    overflow: hidden;
    right:-340px;
    position:relative;
    z-index: 2;
    float:right;
    }
.snipers {
    background: url("styles/images/home-snipers.png")no-repeat 0 0;
    width:520px;
    height:285px;
    display:block;
    top:230px;
    right:66%;
    float:right;
    position:fixed;
    z-index: 3;
    }
.privatejoker {
    background: url("styles/images/home-privatejoker.png")no-repeat 0 0;
    width:421px;
    height:397px;
    display:block;
    top:80px;
    position: absolute;
    float:left;
    z-index: 4;
    }
.rifle {
    background: url("styles/images/home-rifle.png")no-repeat 0 0;
    width:520px;
    height:285px;
    display:block;
    top:250px;
    left:330px;
    position: absolute;
    float:left;
    z-index: 5;
    }

Answer 1

Создайте родительский контейнер, который оборачивает весь ваш «основной» -контент (снайперы и т. Д.) И задайте его position: relative; (чтобы все «абсолютные» дочерние элементы называли это якорем.

Используйте position: absolute;на всех ваших элементах (снайпер и т. д.) и настройте позиции с помощью полей влево / вправо / сверху / снизу ИЛИ (отрицательно), чтобы снова вернуть все на свою позицию.

Ваш «прыжок вокруг» можно объяснить, так как выв некоторых местах используйте относительные значения (проценты) - они будут зависеть от размера области просмотра. Либо вы используете постоянные значения в пикселях, либо вы принимаете тот факт, что большинство людей не будут изменять размер окна при просмотре вашего сайта.

Answer 2

Ваши «снайперы» и «двойные вершины» находятся за пределами оболочки, поэтому они не слипались друг с другом, когда вы нажимали, чтобы скользить вниз.

Попробуйте положить его в обертку вместе с 'винтовкой', 'приватджокером' и т. Д. (^ _ ^)