好久没回顾html了,最近看到css定位和float浮动
才发现自己web内容其实也不牢固.于是上网搜了好久,各个答案大致不同.虽然有菜鸟文档总结,但是没有实例还是相对抽象.只能靠自己根据他们博主的不同答案取对比.最后还是总结了一些,根据此结论与我实验没矛盾处.觉得不错.有必要记下来!!!
强烈建议,因为表述能力有限, 有些地方不全或看不懂的 (https://blog.csdn.net/qq_15096707/article/details/50476102)与此文搭配跟配哦!!!
position系列
(除了默认值 position:static,其他都可以可以(即可有可无)配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL))
一. position:static;(不写时的默认值)
没有定位,元素出现在正常的流中,所以忽略 top, bottom, left, right 或者 z-index 声明,要偏移可以用margin和padding。
二. position:fixed;
起始点始终为:body(即浏览器页面左上角),
,
注意在下面四的2.情况时候,position:fixed和position:absolute很相似
区别&特点:position:fixed在浏览器滑块无论滑动多少页面;依然会定位在TRBL处
而position:absolute;在浏览器滑块划过一个页面就会消失!!
三.position:relative(相对定位)
起始点为: 基于父级(没父级则为body)
(相对定位是指没加 TRBL时候的原始位置的相对,原始位置正是通过父级区域定义(不矛盾);所以
1.relative创建的是"虚拟"的,这会被覆盖;(相对是指没加 TRBL时候的原始位置的相对
.2.原有位置依然存在,也会占用空间,则其他标签占不了此区域!!!)
(注意:当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。)原有位置也会占用空间,则其他标签占不了此区域!!!)(注意:当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。)
四position:absolute;(绝对相对定位),
4. 祖先对象有position的属性(除了position:static) 时起始点为: 该祖先对象左上角为起始点
5. 祖先对象没有position的属性(除了position:static) 时起始点为:body(即浏览器页面左上角)
五 position:inherit;
继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。继承父元素的position属性,但需要注意的是IE8以及往前的版本都不支持inherit属性。