css总结7（定位）

Mr.Joden

于 2023-03-22 22:28:15 发布

阅读量635

点赞数 1

分类专栏： Css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_60633107/article/details/129720596

版权

Css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

定位

前言：

(1) 定位通过position(static、relative、fixed、absolute、stickly)选项和方位(left,right,top,bottom)选项来实现；
(2) 定位可以控制所有分类标签元素：块标签、行内块标签、行内标签；
(3) 有些定位依然占文本流，有些不占文本流（需要我们很好的归纳）；
(4) 定位可以结合其他的属性达到更好的布局效果，比如：z-index、transform、calc(express)；
(5) 元素使用定位后，作用于该元素其他布局相关的属性也会失效：浮动(float、clear)、显示(display)、文本布局(vertical-align、text-align)
(6) 盒子模型的边距并不会受定位所影响，反之边距却会影响定位，定位会参考相关的盒子模型，定位和盒子模型的边距属性可共存达到累加效果；
(7) 正常文本流定位时，right是参靠左原点；而脱离文本流定位时，right是参考右原点；

position可选值

## static：
静态定位；
默认值(方位词失效)，和不设置一个效果；
## relative：
相对定位；
相对于自身原来位置的偏移；
依然保留原正常文本流位置，z-index上调；
## fixed：
固定定位；
固定到屏幕指定位置，不随滚动而滚动；
脱离正常文本流，不占普通文本流位置，z-index上调；
## absolute：
绝对定位；
相对于最靠近的已定位的父元素进行定位，若无已定位父元素则参考<html>（所以使用该定位要给定其父元素定位属性）；
脱离正常文本流，不占普通文本流位置，z-index上调；
## stickly：
粘性定位；
由relative定位特性向fixed定位特性的动态转变，它的方位词是fixed定位执行的参考标准，所以当当前元素相对于<html>的距离大于所给方位距离时，可通过滚动元素达到所给的方位距离从而执行fixed；反之即当当前元素相对于<html>的距离小于或等于所给方位距离时，则直接执行fixed，且此时方位词作用于relative；
未达到方位时，方位词大小在相对于<html>距离之内则为正常为本流，反之则为脱离正常文本流，z-index上调；

方位可选值

left:xpos;
right:xpos;
top:ypos;
bottom:ypos;

按文本流归纳

占正常文本流：static、relative
脱离正常文本流：absolute、fixed
切换文本流：strickly

定位布局

前言：

首先，一方面就是关于使用定位布局的思量；
其次，前面也说了定位布局会结合一些其他的样式属性：transform、calc(express)、z-index等等；

定位布局的思量

(1) 使用定位的业务目的是什么
(2) 哪些是占文本流，哪些不占为本流
(3) 使用时需要注意什么，比如：绝对定位参考的是已定位的父元素
(4) 该可以和定位相结合实现布局的一些其他属性，比如：transform、calc(express)、z-index；

定位+transform

## transform：

transform主要用于2D转换，我们布局主要使用位移，即tanslate(x,y)、translateX(x)、translateY(y)，当然还要明确translate函数中使用的百分比值是自身尺寸的百分比值；
## 思路：
都知道九宫格方位，如果知道容器的总尺寸和子元素的尺寸，那么就可以实现元素在任何一个九宫格位置的确定，比如水平居中：让元素向右偏移容器宽度的50%(第一步)，再让元素向左偏移自身宽度的50%(第二步)；第一步我们使用定位的方位就可以实现，第二步使用transform:translate(x,y)就能实现。
## 示例：水平和竖直居中
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

定位+calc(express)

## calc(express)：

calc(express)本质就是一个css函数，但它强大的混合单位计算使用于定位很有效果；
## 思路：
九宫格方位实现，用公式表示居中：(容器尺寸/2-元素尺寸/2)
## 示例代码：水平和竖直居中
position: relative;
left: calc(50% - 80px / 2); // width:80px
top: calc(50% - 50px / 2); // height:50px