CSS定位有哪几种方式?
css定位有float浮动和position定位。
一、float(浮动)
- 取值
- left:沿着父容器靠左排列
- right:沿着父容器靠右排列
- both:没有浮动
- 特性: 会脱离文档流[^1],沿着父容器靠左或靠右排列,紧贴其他元素,可以解决左右排列的问题。
[^1]:是指文档中可显示对象在排列时所占用的位置。
这种定位方式很简单,只需要规定一个浮动的方向,如 float:left;/float:right;就表示这个元素向左/向右浮动, 是相对于父容器定位。
示例
效果图
但是如果该元素设置了浮动,会影响后面的元素,这时候就需要清除浮动了。
- 清除浮动
-
解决上下排列的情况:利用clear属性清除浮动
clear:left (清除左浮动)
clear:right (清除右浮动)
clear:both (没有浮动)
示例
效果图:没有清除浮动的情况下红色方块会浮在蓝色方块上方。
效果图:给蓝色方块清除浮动之后,红色方块不影响后面元素。 -
解决嵌套排列的情况
①.设置空标签:在父容器下添加一个空标签,然后进行清除浮动,但比较麻烦,不推荐。
②.after伪类:属于空标签的加强版.:after{ content:""; display:block;clear:both;}
示例
效果图
二、position(定位)
position定位是指定位置的定位,可解决叠加排列的问题。以下是常用的几种:
- static(默认):静态定位。当我们没有指定定位的时候,默认就是static。
- relative:相对定位。通过left、right、top、bottom偏移量相对于自身进行偏移。如果没有偏移量,对元素本身没有任何影响,不会使元素脱离文档流,且不会影响其他元素的布局。
- absolute:绝对定位。通过left、right、top、bottom偏移量相对于最近的已定位祖先元素进行偏移,“子绝父相”通常设置父元素relative来配合使用,在没有父元素的情况下,它的参照为body,这种定位方式会使元素脱离文档流。
- fixed:固定定位。通过left、right、top、bottom偏移量相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,这种方式也会使元素脱离文档流。(注:fixed和absolute的区别在于fixed不受祖先元素和浏览器滚动条的影响。)
- sticky:粘性定位。该方式在为达到指定位置的时候,无定位效果,当到达指定位置,就变成固定位置。
以上就是我在逆战班当中学习的css定位。