相对定位、绝对定位与固定定位

1. 定位

1.1 相对定位（relative)

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的;

特点：

它是相对于自己原来的位置来移动的（移动位置的时候是参照点是自己原来的位置）；
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

{position: relative;top: ;left: ;right: ;bottom: ;
}

1.2 绝对定位（absolute)（子绝父相）

绝对定位是元素在移动位置的时候，是相对于它父级元素来说的。

特点：

如果没有父级元素或者父级元素没有定位，则以浏览器为准定位（Document文档）；
如果父级元素有定位（相对、绝对、固定定位），则以最近一级的有定位父级元素为参考点移动位置；
绝对定位不再占有原先的位置（脱标）

{position: absolute;top: ;left: ;right: ;bottom: ;
}

1.3 固定定位（fixed)

固定定位是元素固定与浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变.

特点：

以浏览器的可视窗口为参照点移动元素；
跟父元素没有任何关系；
不随滚动条滚动；
固定定位不再占有原先的位置；
固定定位脱标，也可以看作是一种特殊的绝对定位。

{ position: fixed; }

1.4 定位的叠放顺序

n越大，顺序越在上面

{ z-index: n; }

相对定位、绝对定位与固定定位相关推荐

WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
[css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
html固定按钮相对位置,CSS基础之相对定位，绝对定位，固定定位，z-index
1.相对定位 1.1.相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整.也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位 a position:relative; → 必 ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
前端——css相对定位，绝对定位，固定定位
文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...
html 定位z_index,绝对定位、固定定位和z-index
#### 绝对定位 * 一旦给元素加上`absolute`或`float`就相当于给元素加上了`display:block` * `absolute`元素覆盖正常文档流内元素(不用设z-index,自 ...
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题
解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题参考文章: (1)解决vue中绝对定位或固定定位在底部的按钮随键盘移动的问题 (2)https://www.cnblogs.com/zlfP ...
一键学会三种定位布局，相对定位、绝对定位、固定定位!
定位布局定位属性: position 作用: 指定元素的定位类型取值:static 默认不定位相对定位绝对定位固定定位相对定位关键字 position:relative 特点:相对不脱离文档流 ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...

相对定位、绝对定位与固定定位

1. 定位

1.1 相对定位（relative)

1.2 绝对定位（absolute)（子绝父相）

1.3 固定定位（fixed)

1.4 定位的叠放顺序

相对定位、绝对定位与固定定位相关推荐

最新文章

热门文章