css中的float和相对定位,绝对定位,z-index

来源:互联网 发布:为什么中国网络要翻墙 编辑:程序博客网 时间:2024/06/06 07:40

css中有float浮动属性,参数分别为left,right,none和inherit,意思分别为左浮动,有浮动,不浮动和继承父元素浮动属性;

那浮动是什么意思呢?浮动就是说这个元素飘起来了,假设你在直升飞机上向下看一座房子,这座房子一开始只有一层,所有房间都在最底层,这里房子就是元素;

浮动一个元素就是这个房子移动到2楼了,不跟其他房子在一个楼层了,那面下面的房子就可以向上占住浮动上来的元素的原来的位置,那你在飞机上看下去,浮动上来的二层的房子就会遮挡住部分一层的房子,这时候就可以用左浮动或者右浮动了;左浮动就是移动到二层的左面,右浮动就是移动到二层的右面;


绝对定位(position: absolute;)比较好说,就是相对屏幕左上角,设置top,left两个值就OK了,但绝对定位之后就代表这个元素不在这个界面了,别的元素就可以占他原先的位置;

相对定位(position: relative;)就是相对父元素来说,但是比如说有两个子元素都相对父元素为top10px,left10px,那么第一个正常第二会在第一个子元素下面(紧挨着),并不会覆盖第一个子元素


z-index就是在用定位之后,你想把重叠的页面调整他们的上下位置的时候用,z-index值越大就在上面,z-index可以是负值

1 0
原创粉丝点击