这篇文章主要为大家展示了“CSS定位有哪几类”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS定位有哪几类”这篇文章吧。

成都创新互联公司是一家以成都网站建设公司、网页设计、品牌设计、软件运维、成都网站推广、小程序App开发等移动开发为一体互联网公司。已累计为成都玻璃贴膜等众行业中小客户提供优质的互联网建站和软件开发服务。

一、什么是定位

改变元素在页面中的位置

二、定位的分类

1、普通流定位

2、浮动定位

3、相对定位

4、绝对定位

5、固定定位

三、普通流定位

页面中元素的默认定位方式，默认文档流，从上往下，从左往右

1、每个元素都在页面有自己的空间

2、每个元素都是从父元素的左上角开始显示

3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行

4、行内元素是多个元素在一行显示，从左往右逐个排列

四、浮动定位

1、当元素设置浮动后，该元素脱离默认文档流，后面的元素会上前补位。当前元素会在当前行，向左或者向右排列

float：left、right、none

特点：

（1）、元素一旦浮动，就脱离文档流了，不占据页面空间，后面会上前补位

（2）、浮动元素会停靠在父元素的左边/右边，或者其他已经浮动元素边缘

（3）、浮动就是解决多个块级元素在一行显示的问题

2、浮动引发的特殊情况

a、（1）当父元素显示不下所有已浮动元素的时候，显示不下的几个将换行显示，换行显示的规则：优先上浮，之后向左/右对齐

（2）浮动元素占位，浮动元素会根据浮动方向，占据方向上的位置，不让其他后面浮动元素占用

b、元素一旦浮动，如果没有定义宽度，宽度会以内容为准

c、元素一旦浮动起来，就变成了块级元素，可以设置宽高，可以设置上下外边距

d、文本，行内元素，行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素，围绕者浮动元素显示

e、清除浮动：元素一旦浮动起来会对后续元素带来一定影响（后续元素会上前补位），如果后续元素不想上前补位，那么给后续元素设置clear，清除前面浮动元素带来的影响

clear：left/right/both

f、高度坍塌，块级元素的高度如果不设置，高度以内部元素内容为准，但是如果内部元素都是浮动元素，浮动元素不占据页面空间，父元素的高没有了

解决方案：

    1、直接为父元素设置高度，弊端：不知到父元素高度

    2、父元素也浮动，弊端：浮动会影响后续元素

    3、overflow：hidden，弊端：当元素真的需要显示溢出内容时，就显示不出来了

    4、在父元素中追加一个空的块级元素，并设置clear：both

3、显示

1、显示方式

display

元素在页面中的显示表现形式（块级，行内，行内块）

取值：

（1）none：隐藏，不显示元素，不占据位置

（2）block：让元素的表现形式和块级元素一样，特点：独占一行，可以设置宽高，垂直外边距

（3）inline：让元素和行内元素一样，特点：多个元素公用一行，不能设置宽高和垂直外边距

（4）inline-block：让元素的表现形式和行内块一样，特点：多个元素在一行中显示，但是可以设置宽高和垂直外边距

（5）table：让元素的表现形式和table一样，特点：尺寸以内容为准，每个元素独占一行，允许修改尺寸

2、显示效果

visibility

取值

visible：默认可见

hidden：隐藏

display：none和visibility：hidden的区别  ：display隐藏，脱离文档流，不占据页面空间，visibility不脱离文档流，占据页面空间

3、透明度

opacity

取值：0～1 越小越透明

opacity和rgba的区别：opacity作用于元素，只要跟元素相关的颜色都会跟着透明，可以作用到子元素，rgba只改变当前元素的透明度，不会影响其他元素

4、垂直对齐方式

vertical-align

取值：top/middle/bottom

使用场合：

（1）table标签中，控制文字的垂直对齐，取值：top/middle/bottom

（2）img标签，控制图片与前后文字的垂直对齐方式,取值：top/middle/bottom/baseline

5、光标

cursor：

取值：

（1）default：箭头

（2）pointer：手

（3）text：I

（4）crosshair：十字

（5）wait：沙漏或者转圈

（6）help：问号

五、定位

1、定位的属性

position：

取值：

（1）static： 默认值，静态，默认文档流

（2）relative：相对定位

（3）absolute:绝对定位

（4）fixed：固定定位

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

元素的position设置为relative/absolute/fixed中任意一个值，该元素被称为已定位元素

偏移属性

top/bottom/right/left

left：100px   向由移100px

2、相对定位

元素相对于原来的位置偏移某个距离，没有脱离默认文档流，页面上的位置不会被其他元素补位

语法：position：relative；必须配合偏移属性使用

使用场合：作为绝对定位的祖先元素

（1）位置微调

3、绝对定位

绝对定位的元素会脱离默认文档流，后面元素会向前补位，绝对定位的元素会相对于离他最近的已定位的祖先元素去实现定位，如果所有祖先元素不是已经定位元素，相对于body去实现定位

属性：position：absolute；配合偏移属性使用

使用场合：有层叠效果时

4、固定定位

将元素固定在页面的某一个位置，元素不会随滚动条发生位置变化，一直固定在可是区域内

语法：

position：fixes；配合偏移属性使用

注意：

（1）固定定位脱离文档流，不占页面空间

（2）固定定位元素变为块级元素

（3）相对于body实现位置的偏移

堆叠顺序

元素变为已定位元素，有可能出现堆叠，想修改堆叠顺序

z-index

取值：无单位的数字，数字越大，元素越靠上显示，父子元素间z-index无效，永远都是子元素在父元素上面，只有已定位元素才能使用z-index

以上是“CSS定位有哪几类”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联-成都网站建设公司行业资讯频道！

分享标题：CSS定位有哪几类-创新互联
新闻来源：http://chengdu.cdxwcx.cn/article/eeopp.html