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;并通过左/右/上/下OR（负）边距调整位置，以便将所有元素重新恢复到原位。

您可以解释“跳转”，因为您在某些地方使用相对值（百分比） - 这取决于视口大小。要么使用常量像素值，要么接受这样的事实，即大多数人在浏览您的网站时不会调整窗口大小。

Answer 2

你的'狙击手'和'twinpeaks'在包装器之外，因此无论何时单击滑动，它都不会滑动在一起。

尝试将它与'rifle'，'privatejoker'＆amp;这样（^ _ ^）

固定定位图像我需要什么？

2 个答案: