CSS之四种定位的理解

来源:互联网 发布:sap供应商主数据导出 编辑:程序博客网 时间:2024/05/16 12:12
  1. Static

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

  1. Relative

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

  1. Absolute

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

  1. Fixed

绝对定位方式,直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

0 0
原创粉丝点击