孔子说:"温故而知新, 可以为师矣." 这几天参加了一个免费的前端课, 每天晚上都有直播, 讲解一个独立的案例. 在听前端基础的时候, 发现自己有不少东西没学会, 平时在学校虽说 html 也写了不少, 但有好大一部分都被忽略掉了. 就在刚才看了一个基础案例, 很是有共鸣, 一个简单的轮播图, 牵扯到的东西实在是多. 不得不说, 专业的就是专业的.
好了, 废话不多说, 直接上干货. 经常做页面渲染的筒子可能会遇到的一个问题, position 的相对定位和绝对定位. 这个问题看似很简单, 不就是一个定位嘛, 有什么的? 别急, 我们慢慢往下看. 网上流传着一个说法, 叫子绝父相. 就是说子元素设置绝对定位, 父元素设置相对定位. 然后就可以给子元素设定 top,left 值来控制位置. 这其实是一种很错误的观念, 完全曲解了定义. 楼主之前在学校写页面的时候也犯过类似的错误, 只要实现了效果就行, 管他什么原理呢, 结果每次碰到定位的问题都卡壳. 查半天还记不住, 为了彻底搞懂这个, 特地花时间写了这篇帖子.
relative 也就是相对定位: 是相对于本身的位置进行偏移. 只看自己, 不看其他.
absolute 绝对定位: 相对于非 static 的祖先元素进行位置偏移, 当这样的元素不存在, 则相对于根级容器定位.
以一个轮播图为例, html 代码:
- <div class="banner"><!--S banner-->
- <div class="banner-bg">
- <img src="images/1.jpg">
- </div>
- <div class="banner-bg">
- <img src="images/2.jpg">
- </div>
- <div class="banner-bg">
- <img src="images/3.jpg">
- </div>
- </div>
- <div class="nav"><!-- 导航按钮, 注意这里用的是 < i > 标签 -->
- <i></i>
- <i></i> <i></i>
- </div><!--E banner-->
CSS 代码:
banner 是 banner-bg 的父级, 然后给 banner 设置一个 position:absolute 属性. 按照规则 absolute 要找他的非 static 祖先元素, 我们为了让 banner-bg 这几个轮播图都固定在最上面, 所以就要给轮播容器 banner 添加一个 position:relative 属性. 这样设定 left:0;top:0; 就会定位到 banner 了. 虽然不设定 banner 的 relative 属性也能将图片放到顶部, 但那样的话, banner-bg 找的是根级元素 html, 这并不是我们想要的效果. 为了以后不出现差错, 还是给想要定位的元素添加一个 position:relative 属性.
说了这么多, 其实 absolute 定位的时候, 就看你想要定位到哪个父级元素, 就给哪个元素添加 relative 属性. 而不是盲目的去套那些子绝父相什么的. 搞懂原理才是正解. 希望能帮到需要的人, 花了一下午整理, 就怕有些定义搞不太懂, 编辑博客也是一个学习的过程, 本着对他人负责的态度, 写出来的东西一定要确认无误后才敢发表. 有不足之处欢迎指出.
来源: https://www.cnblogs.com/shaokai7878/p/9531818.html