这就是我要做的
我想在两个div之间有一个z-index -1的div来测试它的视差效果，我把所有东西都放在中间，margin: 0 auto。但是当我将视差div位置更改为绝对位置时，它移动到页面的左侧。接下来，我试着把它移回中间，左:50%，它没有工作，所以我把它改为左:12.5%，它工作了!
但这是我的问题:我可以用其他方法吗?我现在做的是对的还是会给将来带来麻烦!
代码如下:
Html:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meaningless Pap</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="content1">
<h1>Welcome! </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="breaker" data-0="background-position:0px 0px;" data-700="background-position:0px -300px;">
<h2> this is a text </h2>
</div>
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<script type="text/javascript" src="skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
body {
font-family: 'lato';
background: url("http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg") #000;
background-size: cover;
background-position: center;
background-attachment: fixed;
font-size: 100%;
line-height: 1.7;
color: #000;
}
.container {
width: 100%;
margin: 0 auto;
}
.content1 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px 7px 15px #333;
padding: 10px;
z-index: 1;
}
.content2 {
position: relative;
background: #fff;
width: 75%;
margin: 0 auto;
border-radius: 5px;
border: 1px solid #000;
box-shadow: 0px -7px 15px #333;
padding: 10px;
z-index: 1;
margin-top: 200px;
}
.breaker {
position: absolute;
left: 12.5%;
width: 75%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}
.breaker h2 {
padding-top: 50px;
text-align: center;
color: #fff;
}
你的方法没有错。当绝对定位时，宽度百分比和左侧百分比的计算方式相同-相对于第一个父元素，其位置不是静态的。
对于绝对定位元素的另一种方法是同时指定左右位置。这样做的好处是不受任何边框或填充的影响。
.breaker {
position: absolute;
left: 12.5%;
right: 12.5%;
height: 250px;
background: url('bg.jpg');
z-index: -1;
}