定位

定位流分类

相对定位:
相对定位就是相对于自己以前在标准流中的位置来移动
注意点:
1.相对定位是不脱离标准流的,会继续在标准流中占用一份空间

2.在相对定位中同一个方向上的定位属性只能使用一个

3.由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

4.由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

相对定位应用场景:

用于对元素进行微调
配合后面学习的绝对定位来使用

绝对定位:
绝对定位就是相对于body来定位

2.绝对定位注意点:
1.绝对定位的元素是脱离标准流的

2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素

1.规律
1.默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1只要是这个绝对定位元素的祖先元素都可以
2.2指的定位流是指绝对定位/相对定位/固定定位
2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

固定定位

静态定位

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 一.定位流分类 1.1相对定位1.2绝对定位1.3固定定位1.4静态定位 二.什么是相对定位? 相对定位就是相对于...
    壹点微尘阅读 358评论 0 0
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,865评论 0 15
  • 网页布局方式——定位流 标签(空格分隔): H5+CSS [TOC] 网页布局方式——定位流 定位流分类 相对定位...
    袁俊亮技术博客阅读 686评论 0 3
  • 一、文档流的概念指什么?有哪种方式可以让元素脱离文档流? 1、文档流指的是元素在排列布局中所占用的位置,具体的说是...
    鸿鹄飞天阅读 810评论 0 0