轮播图图片占满底层,左右两个导航栏覆盖在上一层(此图出处为京东商城)
将最底层的position设为relative,覆盖的两层设置为absolute
right为0 让它靠右显示 z-index则是让它优先显示
下图是我仿的一个页面
css样式position定位问题
absolute 绝对定位 (参考w3c)
- 位置相对于最近的已定位的父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
- 使得元素的位置与其他的元素无关,不占据空间
-
重叠的元素 元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
- z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
relative 相对定位
- 相对定位元素经常被用来作为绝对定位元素的容器块。
- 相对其正常的位置进行定位