元素的定位

半夜删你代码·

已于 2022-04-02 08:42:16 修改

阅读量210

点赞数

文章标签：前端

于 2022-03-30 19:50:04 首次发布

本文链接：https://blog.csdn.net/m0_60376759/article/details/123854331

版权

CSS定位也叫做定位布局，是继文档流，浮动布局之后的第三大布局方式，定位的意思是指定一个元素/盒子在网页上的位置

定位的基本格式

定位模式：边偏移量属性

边偏移量属性：

偏移量：相对于原点的距离

5种定位模式

（1）静态定位也是定位的默认值表示的是没有开启定位

元素会按照正常的位置显示、此时top bottom left right4个定位的属性也不会被应用

position: static;

（2）相对定位可以使用top bottom left right这四个值

position: relative;

（3）绝对定位以使用top bottom left right这四个值

position: absolute;

（4）固定定位以使用top bottom left right这四个值

固定定位的元素就是在页面中不动的那个元素

position: fixed;

（5）粘性定位粘滞定位相当于relative和fixed的结合体

position: sticky;

属性值 auto length percent百分比

top: 100px; 从顶部的那个线开始计算

top:50%;

top: auto;

-代表的是向上 +代表的是向下

right：从右往左计算

bottom：从下到上计算

静态定位

使用静态定位的时候元素会按照正常的位置显示、并且不会受到top bottom left right等属性影响

特点：静态定位按照文档流的位置摆放他没有边偏移量

相对定位

相对定位就是元素相对于自己默认的位置来进行的偏移

如果没有标签嵌套那么就是相对的是浏览器

（1）不管标签嵌套不嵌套都相对于的是原来的位置

（2）同时使用left和right left生效，同时使用top和bottom top生效

（3）不会脱离文档流也不会对其他的元素产生影响、原来的位置依然在文档流中存在

（4）可以和外边距联合使用但是不建议因为定位可以直接实现

外边距的修改会直接影响原来的占位不建议把外边距和边偏移量一起使用

（5）也可以浮动不允许写浮动

（1）相对定位是相对的是自己原来的位置

那么他存在跑出父元素的问题吗？这个问题不成立

因为相对的是自己。

（2）元素的类型

只要添加了定位那么就变成了定位元素

块级元素

行内元素

行内块元素

所有的添加了定位的属性都是定位元素

绝对定位

绝对定位就是元素相对于第一个非静态定位的父级元素进行的定位

如果找不到符合条件的父级元素的话则会相对的是[浏览器]进行定位

（1）脱离文档流

（2）同时使用left 和 right的话 left生效、同时使用top 和 bottom的话 top生效

（3）实际的企业级开发中一般都使用的是子绝父相（小盒子是绝对定位父盒子是相对定位）

子绝父不相的时候相对的是谁？

初始化包含块---就是浏览器的第一屏

他的大小比body要小更比html小

html body 初始包含块

（4）绝对定位与浮动不能共存

固定定位

（1）脱离文档流

（2）参照的浏览器的可视化窗口视口

（3）同时使用left right的话 left生效、同时使用top bottom的话 top生效

（4）跟父元素无关

（5）不随着滚动条而滚动的

bug：ie8以下的浏览器我们称之为低级浏览器

ie6以下包含ie6的浏览器不支持固定定位

粘性定位

它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

总结

定位模式	是否脱标	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否 (占有位置)	相对于自身位置移动	基本单独使用
absolute绝对定位	是（不占有位置）	带有定位的父级	要和定位父级元素搭配使用
fixed 固定定位	是（不占有位置）	浏览器可视区	单独使用，不需要父级
sticky 粘性定位	否 (占有位置)	浏览器可视区	当前阶段少