好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose

今天学习之前剩下的一个问题:CSS的position属性 。首先归纳出和position相关的问题:

position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什么特点?

第一个问题:position作为一个属性,它一共有哪几个属性值?

对于position属性,他一共有5个值,分别是

static:默认值。没有定位,元素出现在正常的流中。 relative:生成相对定位的元素,相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。这里需要注意一下,absolute的参照对象是第一个拥有非static的position属性的父级元素,后面会详细解释。 fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。 规定应该从父元素继承 position 属性的值。

这种定义性质的问题,一般在W3cSchool上可以找到最标准的的答案,这5种属性的解释已经非常详细。其实我们在开发中经常用的只有relative、absolute、fixed这3个属性,另外当给元素增加了这是种属性中的任意一种,我们也就需要根据情况设置元素的left/top/right/bottom以及z-index, 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定,显示层级通过z-index控制。

第二个问题:position常用的属性值有哪几个?分别有什么特点?

上面已经提到了我们常用的3个属性值: relative、absolute、fixed。

relative:元素的position属性设置为relative后,这个元素会 以自己之前的位置为参照 ,根据设置的left等值进行移动。下面举个栗子~

             Title              #div1{            width: 100px;            height: 100px;            background-color: #0044aa;            margin: 5px;        }        #div2{            width: 100px;            height: 100px;            background-color: #e13b00;            margin: 5px;            position: relative;            left: 50px;            top:50px;            z-index: -2;        }        #div3{             width: 100px;             height: 100px;             background-color: yellow;            margin: 5px;         }           

查看更多关于CSS学习笔记--定位position属性的学习_html/css_WEB-ITnose的详细内容...

  阅读:34次