武汉web培训
达内武汉中心

15271940953

热门课程

web小知识:CSS position属性

  • 时间:2016-05-11
  • 发布:武汉web培训
  • 来源:web教程

    position是CSS中非常重要的一个属性,可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移。达内web培训专家讲解最基础的web知识,谈如何应用positon属性。

    一、基础知识

    postion属性是有4个不同类型的定位,这些类型会影响元素的生成方式。

    position四种类型:

    1.static

    static是position属性的默认值,默认下,块级元素和行内元素按照各自的特性进行显示

    2.relative

    relative称相对定位,设置了这个属性后,元素会根据top,left,bottom,right进行偏移

    div.relative相对定位,相对于父元素进行偏移,并且原本的空间也占据着,下面的元素并不会顶替上去。

    3.absolute

    元素设置成absolute后会脱离文档流,并且不占有原本的空间,后面的元素会顶替上去,而且不论元素是行内元素还是块级元素,都会生成一个块级框,行内元素span设置了absolute后就可以设置height和width属性了。

    4.fixed

    fixed的表现方式类似于absolute,相比于absolute相对于不确定的父元素进行偏移,fixed就是相对于浏览器窗口进行偏移

    二、包含块

    position属性也有包含块这个属性,分三种情况:

    1.根元素的包含块,根元素一般是html元素,初始包含块是一个视窗大小的矩形

    2.非根元素的包含块,如果该元素的position是relative或static,它的包含块是最近的块级框,表的单元格或行内块的内容边界

    3.非根元素的包含块,如果该元素的position是absolute,则包含块为最近的position不是static的祖先元素。

    三、偏移属性

    指的是元素相对于其包含块的偏移,我们称其为偏移属性,分别是top,bottom,left,right,依次代表上下左右。

    四、绝对定位

    1.绝对定位的特点:一个元素被设置为绝对定位时,会脱离文档流,然后相对其包含块进行偏移。

    我们会将一个元素设置为relative来作为absolute元素的包含块,有两个绝对定位元素,第一个元素没有position不是static的祖先元素,其包含块是body,根据body进行偏移;第二个绝对定位元素设置了一个relative的父元素,它根据父元素进行偏移。

    2.绝对定位的重叠问题

    元素设置成绝对定位后会脱离文档流,并且失去占用的空间,而且如果偏移的位置接近,会造成重叠问题。

    第一个元素盖住第二个元素,要用到z-index属性,这个属性表示元素的叠加顺序,默认情况下,z-index为0,数值越高的元素层级越高,就可以盖住低于其层级的元素。若两个元素的层级相同,则越后面的元素会覆盖前面的元素,默认情况下,第二个元素就会盖住第一个元素。

    五.固定定位

    fixed定位很简单,类似与absoulte,但是它的包含块就是浏览器窗口。常见的应用比如固定导航,回到顶部。

    六.相对定位

    relative定位的元素进行偏移后,不会脱离文档流,还有占据原本的空间。还有就是,若元素设置了margin为负值之后发生重叠的情况下,相对定位的元素会覆盖普通元素。

    relative属性最经常的一个应用是作为absolute元素的包含块,为了限制absolute元素的偏移位置,常常设置其父元素为relative来作为其包含块。

上一篇:微软Edge引擎的HTML5兼容性怎么样
下一篇:7个基于jQuery/HTML5的地图插件

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省