html - 固定位置的图像是我需要的吗？

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; (所以所有“绝对” child 都将其称为 anchor 。

使用 position: absolute;在所有元素(狙击手等)上，通过左/右/上/下或(负)边距调整位置，使所有元素再次回到其位置。

可以解释您的“跳来跳去”，因为您在某些地方使用了相对值(百分比)——这将取决于视口(viewport)大小。您要么使用恒定的像素值，要么接受大多数人在浏览您的网站时不会调整窗口大小的事实。