属性:position(定位)
上图是官方的介绍,在实际使用的时候可以通过提示看到还有许多的值可选,例如:-ms-page、-ms-device-fixed、-webkit-sticky、initial、sticky、unset等。
1、fixed(英译:固定的):在官方的介绍中其位置是相对于浏览器窗口来定位的。注意的是当你在元素中使用了该值来定位,它的位置使用left、top、right、bottom来改变元素的位置,如果你使用margin的话,它是相对于上一个元素的。
补充:
2、absolute:绝对定位,相对于static(默认值)定位以外的第一个父元素进行定位。下图是效果图,(需要注意:因为position默认值是static,所以要想实现效果需要对父元素设置position除static之外的的值)
3、relative:相对定位,相对于其正常位置进行定位。意思就是相对于其原本的位置进行定位。
(总结:值得注意的是absolute、relative、fixed常用的三个定位值都是使用left、top、right、bottom来定位,而并非是使用margin,padding来调整位置。虽然margin、padding也可以调动位置,但千万别误解了
* * *margin和padding:margin是用来调节外边框距的,也就是元素与元素之间的距离,当全局没有一个定位元素时,第一个元素以浏览器左上角为原点定位,二第二个元素以第一个为原点定位,以此类推。例如:有两个p标签,第一个margin-top:20,而第二个设置margin-top:-40,在界面上第二个p标签中的内容在第一个之前。在这里还需要注意的是只有块级元素设置margin-top或者margin-bottom才有效果。
padding是调节元素内部内容到元素内边框的距离。同样行级元素的padding-top以及padding-bottom也是没有效果的。
)
4、inherit:继承,从父元素继承其position属性。效果图:(通过两张图的比较,以及上面的内容可以看出里面的3个div继承了父级元素的position)
5、其他:static(默认值),上面有提到过,就是没有设定位,按正常来该怎样就怎样。
initial(最初的),这个我尝试过,大概意思就是单词的意思最初的,也就是原本该怎样就怎样。这个也是css的一个关键字。
sticky(英译是不愉快的、粘性的、不动的等),我尝试过如图:在没有设置为sticky时,top:50px;红色的div应该被绿色的遮盖住了,但是当设置了sticky时如图,并没有完全遮盖,实际上只下移了30px,所以这或许就是这个单词的意思粘性、没有按实际来造成不愉快吧....