position属性

position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute。

  第一种:position:static代表的是html的默认值。可以理解为自身没有定位,是遵循html默认的页面文档流排布的。此时调整位置的top,right,bottom,left四个属性对它没有任何作用。

  第二种:position:fixed定位是指元素的位置相对于整个页面是固定位置,即使窗口是滚动的他也不会滚动,而且fixed定位使元素的位置与文档流无关,因此不占据空间,所以会和其他元素发生重叠。此时它可以用top,right,bottom,left四个属性来固定它在整个页面中的摆放位置。

  第三种:position:relative是指相对于自身的位置设置一个定位,这样它所代表的块级元素就脱离了html默认的文档流。此时它便可受top,right,bottom,left四个属性的设置所影响位置变动。通常我们用来定位一个父级元素以便于这个父级元素下的子元素调整位置布局使用。

  第四种:position:absolute绝对定位的元素相对于最近的已定位父级元素来进行定位,如果元素没有已定位的父级元素,那么它会一直向上找具有自身定位的元素。如果一直找不到的话,就会追溯到整个html页面的默认文档流来定位。

posted @ 2019-05-31 20:17  CWJDD  阅读(407)  评论(0编辑  收藏  举报