返回信息流想实现的效果：http://7xrp04.com1.z0.glb.clouddn.com/task_1_12_1.jpg
本来是3个链接，点击哪个链接显示对应的div，现在不知道怎么回事，位置错了，有点搞不清absolute的定位是相对啥来的了，外面relative定位的元素设置了宽度之后，就乱了，链接跑到左边去了，求教。
```HTML
<div class="slidebox">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<ul>
<li><a href="#slide1">1</a></li>
<li><a href="#slide2">2</a></li>
<li><a href="#slide3">3</a></li>
</ul>
</div>
```
```CSS
.slidebox {
height: 100px;
width: 250px;
position: relative;
overflow: hidden;
border: 1px solid gray;
}
.slide {
height: 100px;
width: 250px;
position: absolute;
top: 0;
}
.slide:nth-of-type(1) {
background: red;
left: 0;
}
.slide:nth-of-type(2) {
background: yellow;
left: 250px;
}
.slide:nth-of-type(3) {
background: green;
left: 250px;
}
.slide:target {
left: 0;
z-index: 1;
}
.slidebox ul {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
}
```
这是一条镜像帖。来源：北邮人论坛 / www-technology / #40041同步于 2017/5/14
该镜像源已超过 30 天没有更新，可能在源站已被删除。
WWWTechnology机器人发帖
【问题】absolute定位问题求解
youen
2017/5/14镜像同步4 回复
订阅后，新回复会通过你的通知中心匿名送达。
4 条回复
楼主用的是chrome吧，这样写在chrome是会出现问题(在ie跟firefox没问题)，但具体我也不知道咋解决，我猜测是因为chrome会先执行href，跳转到对应id的div后，再进行css的执行，导致切换到对应div后，由于css里面设置了left为0，当前div向左滑动了250px，出现了链接跟目标div都跑到浏览器左面的情况。我研究了下，下面这样写是可以实现的。
<div class="slidebox">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<li>
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
</li>
</div>
.slidebox {
height: 100px;
width: 250px;
position: relative;
overflow: hidden;
border: 1px solid gray;
}
.slide {
height: 100px;
width: 250px;
position: absolute;
top: 0;
}
.slide:nth-of-type(1) {
background: red;
/*left: 0;*/
}
.slide:nth-of-type(2) {
background: yellow;
/*left: 250px;*/
}
.slide:nth-of-type(3) {
background: green;
/*left: 250px;*/
}
.slide:target {
/*left: 0;*/
z-index: 1;
}
.slidebox li {
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
list-style-type: none;
}
.slidebox a{
display:inline-block;
background:greenyellow;
text-decoration: none;
padding:2px 6px;
}
【 在 wodebupt 的大作中提到: 】
: 楼主用的是chrome吧，这样写在chrome是会出现问题(在ie跟firefox没问题)，但具体我也不知道咋解决，我猜测是因为chrome会先执行href，跳转到对应id的div后，再进行css的执行，导致切换到对应div后，由于css里面设置了left为0，当前div向左滑动了250px，出现了链接跟目标div都跑到浏览器左面的情况。我研究了下，下面这样写是可以实现的。
: <div class="slidebox">
: <div class="slide" id="slide1"></div>
: ...................
谢谢，确实在火狐上是好的， 疑心是overflow的问题，后来我给里面3的div又包了一个absolute的div，设置它的overflow属性，正常， 但是还是不知道其中的原理是啥
同怀疑是＃定位问题。。。把overflow改成scroll看了一下，＃还是定位到了left:250px 的位置。。感觉CSS的渲染顺序也有关系。。
PS：absolute是相对于第一个定位不是static的父元素定位的。。