CSS中的元素定位详解

在前端开发中,CSS定位主要是来控制元素显示的,简单点就是来固定元素的位置。

CSS中我们是通过position 属性来实现元素定位的,position的值有static relative absolute fixed inherit五个,接下来我们详细介绍下这五个值的内容。

1static定位,也就是没有定位,元素正常显示在文档流中,static也是position 的默认值,如果我们不给元素设置position,他就是默认的position: static。对元素使用leftright等偏移属性是没有效果的,z-index的声明也是无效的。

2relative定位,相对定位,元素也是正常显示在文档流中的,但它和static定位定位的区别在于,position: relative可以使用leftrighttopbottom偏移属性,使用relative定位设置偏移属性后,元素相对于其原来位置向左、向右等方向进行偏移。在使用relative定位中有一个特别需要注意的地方是,元素虽然相对于其原来位置进行了偏移,但它原来的位置还是存在的,和它相关的元素还是正常显示的,并不会因为设置了偏移属性而改变其原来位置,这里我们举个例子。如下图:

Screenshot from 2017-08-20 19-15-54

这是一个div包裹的3p元素,为了方便识别,分别给div p元素设置了背景颜色,这里我们给第二个元素添加如下CSS代码,position: relative;   top: 30px;   left: 30px;   我们可以看到如下效果:

Screenshot from 2017-08-20 19-24-08

第二个p元素相对于其原来的位置进行了向左,和向上 30px的偏移,但第一个p元素和第三个p元素的位置并没有受到影响,第三个p元素也不会覆盖第二个p元素原来的位置。

3absolute定位,如果元素设置了position: absolute属性,该元素就会脱离文档流,不会占据文档流中的位置,好像这个元素消失了,

但这个元素并没有消失,我们可以理解为该元素浮起来了,通过leftrighttopbottom来设置元素显示的位置,那么它显示的位置又在什么地方呢,它会根据除了static定位的父元素或者祖先元素进行定位,也就是说它的定位会先找到自己的父元素,如果父元素的定位不是static定位,那么它就是根据父元素的位置来进行定位,通过设置leftright等确定元素位置,如果父元素为static定位,则继续找父元素的父元素定位,直到找到祖先元素不是static定位的。这里我们看个例子,一个div里面包裹了三个高宽为60pxdiv,最外面div我们使用了position:relative,并且我们用颜色区分了里面的div,如下图所示:

Screenshot from 2017-08-20 20-17-52

我们对第二个绿色div添加如下代码position: absolute;  left: 80px;  top: 60px; 我们可以看到如下效果:

Screenshot from 2017-08-20 20-25-52

4fixed定位,fixed定位是和absolute定位一样脱离文档流,它是根据浏览器窗口进行定位,通过leftrighttopbottom来设置元素显示的位置,不会随着浏览器滚动条的滚动而滚动,固定在原来位置。

5inherit定位,inherit 定位时候,元素继承父元素的position值来进行定位。

发表评论

电子邮件地址不会被公开。 必填项已用*标注