一.定位(position)

- 定位指的就是将指定的元素摆放到页面的任意位置

通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static：默认值，元素没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

sticky：开启元素的粘滞定位

二.定位方式

2.1 相对定位（relative）

当元素的position属性设置为relative时，则开启了元素的相对定位

1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）

3.相对定位的元素不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位

2.2绝对定位（relative）

1.开启绝对定位，会使元素脱离文档流

2.绝对定位会改变元素的性质，不在区分块还是行内，更类似行内块元素

3.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

4.绝对定位会使元素提升一个层级

5.绝对定位是相对于离他最近的包含块定位的

（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

正常情况下：

离当前元素最近的祖先块元素

-定位情况下：

离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

html （根元素，初始包含块）

2.3绝对定位（fixed）

1.用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

2.以浏览器为参照物，和父元素没有任何关系；

3.固定定位不占有原来的位置，即脱离标准流 ,改变元素的性质

4.应用场景

固定导航,固定侧边栏,广告

2.4粘滞定位（sticky）（一般用于页面导航的吸顶效果)

1.以浏览器为参照物（体现固定定位特点）；

2.占有原来位置,不会脱离文档流（体现相对定位特点）；

3.粘滞定位可以在元素到达某个位置时，将其固定

4.没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

三.绝对定位元素布局

3.1水平布局

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

-当开启决定定位后，水平方向的布局等式就会加上left，right两个值

此时规则和之前一样，只是多添加了两个值

-当发生过度约束时

1:如果9个值中没有auto，则自动调整right值以使等式满足

2:如果有auto，则自动调整auto的值以使等式满足

-可设置auto的值

margin width left right

四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,

若width left right都为0，margin会均分四个方向值

—两个auto的情况

margin 和width为auto，调整width

margin 和left，right其中一个值为auto，调整left或right

width 和left，right其中一个值，不可同时设为auto

left，right都为auto 调整right

—三个auto的情况

margin width left ===> width，left不可同时设为auto

margin width right ===> width，right不可同时设为auto

width left right ===> width，right，left不可同时设为auto

—四个值auto的情况

width，right，left不可同时设为auto

3.2垂直布局

等式也必须满足

top+margin-top+····+botoom

html中的定位及其定位方式相关推荐

HTML中的几种定位方式
1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方.所以在不同的分辨率下,采用流式定位能很好的 ...
python中xpath定位_xpath最新:关于python中的xpath解析定位_爱安网 LoveAn.com
关于"xpath"的最新内容聚合阅读这篇文章主要介绍了关于python中的xpath解析定位,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧... 这篇文章主要 ...
在3G中实现LBS的定位技术和GIS系统
一.引言无线定位业务又称为位置业务(Location-Based Ser-vices,LBS),是由移动通信网提供的一种增值业务,通过一组定位技术获得移动台的位置信息(如经纬度坐标数据),提供给移动 ...
RoboCup中的机器人自主定位——从理论到实践（三）：粒子滤波器
最近虽然闲在家中,但是要开始做毕业设计了,每天光是读论文就花去了大量的时间,因此这个系列更的有点慢,不过我一定会抽空写完的,也算是为以后找工作问项目经历提前做点准备. 我们继续本节的内容~ 上一次在R ...
ios 位置服务器,关于 iOS 和 iPadOS 中的隐私与定位服务
隐私设置借助 iOS 和 iPadOS 中的隐私设置,您可以控制哪些 App 可以访问储存在您设备上的信息.例如,您可以允许社交网络 App 使用您的摄像头,以便拍摄照片并上传到该 App.您还可以 ...
vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
视频+课件| 室内动态变化场景中的相机重定位（CVPR2021）
写在前面感谢「3D视觉从入门到精通」知识星球嘉宾山东大学董思言博士为我们带来的主题为<室内动态变化场景中的相机重定位>视频讲解,星球成员可免费观看学习.备注:董思言,山东大学四年级博士生 ...
重磅直播 | 室内动态变化场景中的相机重定位（CVPR2021）
大家好,本公众号现已开启线上视频公开课,主讲人通过B站直播间,对3D视觉领域相关知识点进行讲解,并在微信群内完成答疑. 本期由山东大学董思言博士分享,分享的主题为<室内动态变化场景中的相机重定位 ...

html中的定位及其定位方式

一.定位(position)

二.定位方式

三.绝对定位元素布局

html中的定位及其定位方式相关推荐

最新文章

热门文章