定位流

1.分类

【1】相对定位 position:relation+top+right+bottom+left

给它定位margin属性是给它定位之前的盒子添加margin属性的

1)相对定位不脱离标准流的,还是会占用标准流的空间

2)相对于以前相对自己以前在标准流中的位置来移动

同一个方向上的定位属性只能有一个,由于相对定位不脱离标准流的,所以在相对定位中是区分块级元素,行内元素,行内块级元素


设定box2的margin,会在移动之前的地方做出变化

3)应用场景

用于对元素进行微调


【2】绝对定位

position:absolute+top+left

相对于body来定位

1.)脱离标准流

2)绝对定位的元素是不区分块级元素,行内元素和行内块级元素的

3)参考点

1.默认情况下都会以body作为参考点,无论有没有祖先元素,都会以body作为参考点

2,如果一个绝对定位的元素右祖先元素,并且祖先元素也是定位流,那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点

只有祖先元素有一个定位流就可以了,指的定位流指的是相对定位, 绝对定位和固定定位

样式



box2元素以box1作为参考点


显示

3.第三个规律

第三个规律




【3】固定定位

静态定位

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 网页布局方式——定位流 标签(空格分隔): H5+CSS [TOC] 网页布局方式——定位流 定位流分类 相对定位...
    袁俊亮技术博客阅读 682评论 0 3
  • 一、定位流分类 1.1相对定位1.2绝对定位1.3固定定位1.4静态定位 二、什么是相对定位? 2.1相对定位就是...
    Miss一曦阅读 258评论 0 1
  • ## 定位流 # 相对定位 # 绝对定位 # 子绝父相 # 固定定位 # z-index属性 定位的元素会盖住没有...
    KsKison阅读 432评论 0 0
  • 定位 相对定位 作用: 相对定位就是相对于自己以前在标准流中的位置来移动 格式:position: relativ...
    MGd阅读 214评论 0 0