1.1为什么需要定位?
1.需要实现某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子
2.当我们滚动窗口的时候,盒子是固定屏幕某个位置的。
1.2定位组成
定位:将盒子定在某个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
1.定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置
值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
stick | 粘性定位 |
2.边偏移
边偏移就是定位的盒子移动到最终位置。有top bottom left right 4个属性
边偏移属性 | 描述 |
top | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
1.3静态定位staic(了解)
静态定位是元素的默认定位方式,无定位的意思
语法: 选择器 {position:static}
静态定位按照标准流摆放位置,它没有边偏移
静态定位在布局时很少用到
基本等于标准流
1.4相对定位relative(重要)
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的(自恋)
语法: 选择器 {position: relative}
相对定位的特点:
1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来在标准流的位置继续占有,后面的盒子依然以标准流的方式对待
(不脱标,继续保留原来的位置)
它最典型的应用是给绝对定位当爹的
1.5 绝对定位absolute (重要)
绝对定位是元素在移动元素的时候,是相对于它祖先元素来说的(拼爹)
选择器 {position:absolute}
绝对定位的特点:
1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对 绝对 固定定位),则以最近一级的有定位的有定位祖先元素为参考点移动位置
(最近一级有定位的父元素为准进行移动)
3.绝对定位不在占有先前的位置(脱标)
1.6子绝父相的由来
子绝父相:子元素使用绝对定位,父元素就得使用相对定位
这样子元素可以在盒子里随意移动,并且不占用影响其他兄弟盒子
1.7固定定位fixed(重要)
选择器 {position:fixed}
固定定位的特点:
1.以浏览器的可视窗口为参照点移动元素
--跟父元素没有任何关系
--不随滚动条滚动
2.固定定位不在占有原先的位置
(也是脱标的),也可以看作是一种特殊的绝对定位
固定定位小技巧--固定到版心右侧
1.先向左移动50%(定位移动)
2.再向左移动版心宽度的一半就可以(可以使用外边距移动)
示例版心为1200px
.daji {
position: fixed;
left: 50%;
margin-left: 600px;
background-color: skyblue;
top: 500px;
}
1.9粘性定位
粘性定位可以被认为是相对定位和固定定位的混合。sticky粘性
选择器 {position:sticky}
粘性定位的特点:
1.以浏览器的可视窗口为参照点移动元素(固定定位的特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加上下左右其中一个才有效
(例如:top=0 即为当元素离浏览器上沿为零像素时开始变为固定,不随之滚动
1.10定位的叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index属性来控制盒子的前后次序(类似于z轴)
1.数值可以是正整数,负整数或0,默认是auto,数值越大,盒子越靠上
2.如果属性值相同,则按照书写顺序,后来居上
3.数字后面不能加单位
4.只有定位的盒子才有这个属性
1.11定位的拓展
1.绝对定位的盒子居中
因为加了绝对定位的盒子不能通过margin:0,auto 水平居中,但是可以通过一下计算方法实现水平和垂直居中
分为两步:
1.先使用定位走父容器宽度的一半(50%)
2.再使用margin-left 负值移动盒子宽度的一半
(第一步走过了,往回移动一点)
2。定位的特殊特性
绝对定位和固定定位也和浮动类似:
1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位,如果不给宽度和高度,默认大小是内容的大小
3.脱标的盒子不会触发外边距塌陷
浮动元素,绝对定位(固定定位)元素的都不会触发外边距塌陷问题
4.绝对定位(固定定位)会完全压住盒子
和浮动元素不同,浮动元素只会压住它下面标准流的盒子,但是不会压住下面的标准流盒子里面的文字和(图片)
但是绝对或者固定定位会压住下面标准流所有的内容
因为浮动最初是用来制作文字环绕效果的