HTML+CSS之关于position的一些使用记录

2018-01-13 11:01:08来源:网络收集作者:程序诗人人点击

分享

阿里云爆款

前端布局的时候用到的一个css属性-position,这个属性经常用到,对于前端写布局起到非常重要的作用,在此记录下关于使用position的一些个人看法。


position是用于设置元素的定位方式,默认是static,按文档流的定位方式排下来:


段落1style样式:



运行结果如下,正常情况下,为了分别各个元素,加了颜色框。


HTML+CSS之关于position的一些使用记录

现在我们给h1元素增加position:absolute,但是不设置top,left,right,bottom,如下:


现在运行下,效果如下:


HTML+CSS之关于position的一些使用记录
我们可以看到效果变了,之前绿色框是被黑色和红色包围着的,现在自己脱离了,并且红色黑色框高度没了,绿色框宽度没了。原因:


h1设置absolute之后,会脱离文档流,脱离文档流的元素会塌陷,即宽度高度会变成自适应(如果没设置具体宽度高度),所以绿色框宽度变短了,而红色黑色框由于h1的脱离,它没有内容支撑,所以里面没有元素了,所以高度变了,但是它自己没有设置position所以没有脱离文档流,所以宽度还是填满的。如果你给红色框设置了absolute,你回发现红色黑色框宽度变了,变成自适应的大小了,而不是填满。


此时,我们再给绿色框即h1设置left,top等属性:


效果:


HTML+CSS之关于position的一些使用记录


此时发现位置变了,因为不设置left,top之类的,它的位置依然是以父元素为基准的正常位置,即第一张图的位置,如果设置left或者top之类的属性后就会以最近的设置了定位属性的父元素为基准,由于红色框和黑色框都没设置position,所以就是以窗口左上角为基准来定位的。注意:left,top之类的属性只有在position设置了absolute或者relative才有效,它们是在正常位置进行left、top等操作的。你可以取消h1的position试试,此时left之类的属性都没有效果了。


再来,我们将h1的position设置为relative,然后将left设置为15px,之前是5px,看不出来效果,不够明显。


效果:


HTML+CSS之关于position的一些使用记录
你会发现,它跟第一张图是一样的,除了它向右移动了15px,这就是relative的作用,relative就是让你可以相对于父元素,用left、top等属性让它相对于原位置进行移动,如果不是relative或者absolute,那么left、top之类就无效。可以和absolute对比下,发现(给h1设置absolute和relative)区别在于:


1.relative的时候,父元素黑色框和再上层的红色框依然是填满的;absolute的话,父元素会自适应高度变矮。由于黑色框和红色框没设置absolute,所以没有脱离文档流,因此宽度还是填满的。


2.relative时,绿色框的left是相对于黑色框来作为参照物进行偏移的;absolute的话,是以窗口作为参照物进行偏移的(如果上层的元素设置了定位属性,那么就会以最近的设置过定位属性的父元素作为参考)。


最后,由于本人是安卓开发者,所以对前端的知识没有各位前端的大神熟悉,有不当之处还请见谅并指出。


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台