纯干货!无概念! position(css定位)的全五种技巧总结

好久没回顾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属性。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值