前言:本文主要将css中的盒子定位仔细分析一下,希望能够帮助大家。有对前端感兴趣的朋友可以关注我的头条帐号。
1.位置属性Position的基本概念
1.1. 概念理论
1.2. CSS的三种定义机制以及第一种定位机制普通流
1.3. CSS的第二种定位机制浮动
1.4. CSS的第三种定位机制绝对定位
2.取值fixed的应用场景和用法、以及偏移属性的用法
2.1. 应用场景举例
2.2. 官方文档解读
2.3. 示例验证
2.3.1.标签部分
2.3.2.没定位前的样式
2.3.3.没定位前的效果
2.3.4.测试1,只启动固定定位属性
2.3.4.1.样式部分
2.3.4.2.观察1
2.3.4.3.观察2
2.4.偏离位置 top right bottomleft的理解
2.4.1.回顾background-position中toprightbottomleft
2.4.2. 以left和top为例,解读偏离的含义
(1)参照物是谁(以图中的A标签为参照)?
(2)以参照物的哪个方向为基准偏移点(lefttop)?
(3)沿着 基准点 的正方向还是负方向偏移(B为正偏移,C为负偏移)?
(4)偏移多少个单位 (B:left:50px,top:80px; C:left:-200px,top:-150px)?
2.5.启用偏移属性的示例1
2.5.1.官方文档
2.5.2.修改样式部分
2.5.3.效果1
2.5.3.效果2
2.6.启用偏移属性的示例2
(1)、grandson2从送son2中脱离出来,观察与原位置的变化;
(2)、 脱离文档流后,后续标签的起始位置,(即大领导调离后,老二上位,类似float)。
2.6.1.标签的代码部分
2.6.2. 观察部分省略
2.7.完整代码
见下一个主题【主题三】的代码部分
3.取值absolute的应用场景和用法、以及谁能作为包含块
3.1. 应用场景
3.2. 官方文档解读
3.3.包含块的理解
3.4.示例1
3.4.1.标签部分
3.4.2.未定位前的样式部分
3.4.3.未定位前的效果部分
3.4.4.设置grandson22和grandson32 的绝对定位和偏移
3.4.5.效果
4.取值relative的应用场景和用法
4.1.官方文档
4.2.实际用途
【实际使用时,只作为包含块使用】,因此只有 positive :relative;没有偏移的设置。
4.3.示例
见上述positive:absolute的例子。
5.取值static的应用场景和用法
5.1.官方文档
5.2.实际应用
当需要取消以前的定位时,通过设置position:static即可。【即取消定位】。
6.定位总结对比
(1)、 正常文档流正常定位,块状元素垂直方向依次排放,行内元素水平方向依次排放;
(2)、浮动元素,浮动后不完全脱离文档流,浮动定位;
(2.1) 脱离文档流,进入 z轴,变成行内块;
(2.2) 以父框为包含块,在包含块内左右浮动;
(2.3)包含块内首个浮动的,Y轴不变,左右浮动;
(2.4)后面连续同方向浮动的,首位相接,排队;
(3)绝对定位
(3.1) 固定定位,以浏览器视窗为包含块,包含块内找参照边、沿参照边的正负方向偏移指定单位的距离;多用于不受滚动条影响的广告位等。
(3.2) 绝对定位,以最近直系先祖中含非static的定位标签为包含块,包含块内找参照边、沿参照边的正负方向偏移指定单位的距离;多用于标签重叠,后代标签跨代对齐偏移;
(3.3) 相对定位,以自身位置为参照物,主要用于作为后代标签的包含块。
(3.4) 静态定位,没有定位,或者取消定位。
喜欢的朋友,请关注我的头条帐号,本文由AAA学术部出品,转载请注明!有需要代码和视频的朋友请关注我之后私信发送“定位”两字,必回!