css 定位方式有哪几种, 各有什么特点

471 阅读2分钟

float 定位(即浮动定位):

这种定位方式很简单,只需规定一个浮动的方向(如:float:left;就表示这个元素向左边摆放),它的定位是相对于父元素容器;

如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素若要不受影响,则要在后面清除浮动(可用 clear:both;等方法),在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。

position 定位:

position 定位是指定位置的定位,以下为常用的几种:

Static

这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。

Relative

相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用 top,bottom,left,right 进行移动位置之后依旧不会改变其所占用空间的位置。可以使用 z-index 进行在 z 轴方向上的移动。

Absolute

绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是 static 定位的父级元素作为参考进行定位,如果其所有的父级元素都是 static 定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用 top,bottom,left,right 进行位置移动,亦可使用 z-index 在 z 轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的 100%变为 auto。

注意:当元素设置为绝对定位时,在没有指定 top,bottom,left,right 的值时,他们的值并不是 0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

Fixed

绝对定位方式,直接以浏览器窗口作为参考进行定位。其它特性同 absolute 定位。当父元素使用了 transform 的时候,会以父元素定位。

关键词:前端培训