定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）

一、相对定位

（1）布局：文档流，margin，浮动，定位····

定位：一种高级的布局的方式。你可以将任何的元素，放在页面任意的位置

学习定位：如何开启，开启后特点

position样式名，

可选值：static 默认值，没有开启定位

开启定位的情况：

1.relative 相对定位

2.absolute 绝对定位

3.fixed 固定定位

4.sticky 粘滞定位

（2）开启相对定位后，元素的特点：

1、开启相对定位，如果没有设置偏移量，元素的位置是不发生变化

2、相对定位的原点是元素原本在文档流中位置

3、开启相对定位后，元素的等级会提高

4、开启相对定位，元素不会脱离文档流，

元素的性质不会改变，也就是块元素还是块元素，行内元素还是行内元素

（3）偏移量可正可负

left 元素相对于定位位置左侧距离

top 元素相对于定位位置上侧距离

right 元素相对于定位位置右侧距离

bottom 元素相对于定位位置下侧距离

通常偏移量只需要使用两个就可以对一个元素进行定位，

一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

二、绝对定位

（1）开启绝对定位

position: absolute;

绝对定位开启后的特点

1、开启绝对定位后的元素会脱离文档流

2、开启绝对定位后，元素的性质会发生变化

块元素不会独占一行了，行内元素也可以设置宽高了等

3、开启绝对定位后，如果希望元素的位置发生变化，依然需要设置偏移量

4、绝对定位相对于其包含块来发生偏移

5、绝对定位也会提高元素的等级

（2）包含块：

1、没有定位的时候，包含块就是其父元素

2、如果有定位的时候，包含块就是离元素最近的开启了定位的祖先元素，

如果没有其祖先元素都没有开启定位，其包含块就是html根标签，

所以我们管html也叫初始包含块

三、固定定位

（1）position: fixed;开启固定定位

（2）特点：

1、开启固定定位后，元素会脱离文档流

2、开启固定定位，会改变元素的性质

3、固定定位一直是参照html根标签来发生偏移

4、开启固定定位后，元素不会根据滚动条滚动而滚动

补充：固定定位的应用场景

一般顶部导航，侧边导航，广告

四、粘滞定位

（1）position:sticky; 开启了粘滞定位

（2）特点：

1、开启粘滞定位，元素不会脱离文档流，元素的性质也不会发生变化

2、开启粘滞定位，必须配合top值使用，在没有到达top值的时候，

元素是随着滚动条滚动而滚动的，当到达top值的时候，就不会随着滚动条滚动而滚动了

3、粘滞定位也是参照html来偏移

应用场景：

导航，侧边导航····

一般注意浏览器兼容问题

定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）相关推荐

CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）
目录元素的定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的定位相对定位当元素的position属性值设置为relative时则开启了元素的相对定位. 相对定位的特点: 1.元 ...
定位详解（固定定位，粘滞定位）
固定定位: 固定定位是绝对定位的一种特殊形式,类似于正方形是一个特殊的矩形.它以浏览器窗口作为参照物来定义网页元素.当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位. ...
CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级
一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
定位的开启及特点（固定定位和粘滞定位）
目录一.固定定位 1.固定定位的开启 2.固定定位的特点 3.固定定位的应用场景二.粘滞定位 (一般用于页面导航的吸顶效果) 1.粘滞定位的开启 2.粘滞定位的特点一.固定定位 1.固定定位的开 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
CSS之定位（粘滞定位）
粘滞定位: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
04.粘滞定位.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）

定位：相对定位，绝对定位，固定定位，粘滞定位（巨详细）相关推荐

最新文章

热门文章