关于绝对定位的使用要点（手风琴bug）

关于绝对定位的使用要点（手风琴bug）

首先：上结构

<div class="wrapper">
			<ul>
				<li >
					<a href="">
						<img src="王者荣耀手风琴-pic/1.1.png" class="small">
						<img src="王者荣耀手风琴-pic/1.2.png" class='big'>
					</a>
				</li>
				<li>
					<a href="">
						<img src="王者荣耀手风琴-pic/2.1.png" class="small">
						<img src="王者荣耀手风琴-pic/2.2.png" class='big'>
					</a>
				</li>

			</ul>
</div>

再上css样式

			*{padding: 0;margin: 0;}
			.wrapper{width: 852px;overflow: hidden;margin: 100px auto;} 
			ul {overflow: hidden;}                   
			ul li{list-style-type: none;float: left;
			width: 224px;height: 68px;margin-right: 10px;}
			.small{width: 68px;height: 68px;position: absolute;top: 0;left: 0;border-radius: 5px;}
			.big{width: 224px;height: 68px;}
	

下面这个图片是我们想要的效果
可实际这样的效果却是

两个小图片重叠在左边了!有点奇怪，明明设置了absolute绝对定位让他们相对于最近的父元素定位在left：0；top：0；怎么会都重合定在容器的左边呢？

于是我们想到办法 给他们的li设置relative定位，让这些小图片根据他们所在的li进行绝对定位。

这一步搞定，然后会出现什么问题呢，如果不使用手风琴动画的话，该效果已经满足需求了。只不过我们在做手风琴动画效果的时候，要求一开始除了第一个li放着的是大图片以外，其他li的大图要隐藏即：（current即第一个li的类名）

.big{display：none}
.current .small{display：none}
.current .big{display：block}

当大图片display：none的时候

重点来了！！！

除了第一个li以外的其他li因为大图片display:none之后一个li a里面只剩一个用绝对定位脱离普通流的小图片,这样li又没有设置高宽就会塌陷直接"死亡" 导致小图片的参照没了,他就会找到再上面的爷元素ul进行参照,于是都挤到ul的左上角(最左边) 导致所有小图片重合。解决办法:给每个li设置宽高,因为我们也是给li设relative的。

所以：给所有相对定位的元素加宽高特别重要，特别是这里只剩一个脱离普通流的绝对定位元素。