文章目录

1.定位介绍2.定位的方式2.1 相对定位2.2 绝对定位2.2.1 子绝父相 2.3 固定定位 3. 元素的层级关系4. 总结

1.定位介绍

定位有两个作用:

1.可以解决盒子和盒子之间的层叠问题(定位之后元素层级最高,可以层叠在其它盒子上面)

2.可以让盒子始终固定在屏幕中的某个位置

属性名:position

常见的属性值:

ps: 这四个取值中第一个就是不定位,加和不加都是一个效果.

设置position只是设置定位的方式.除了定位方式还要设置偏移值

偏移值设置分为两个方向(水平和垂直方向)

ps:这里的属性值可以写成百分比的形式

2.定位的方式

前面说了定位方式有4种,静态定位,相对定位,绝对定位和固定定位

静态定位就是不定位,重点是另外三种定位方式

2.1 相对定位

相对定位就是相对自己原来的位置进行移动

position: relative;

效果演示:

这是没有设置定位前的效果:

设置定位后:

可以看到div在原有位置的基础上,向右边和下边偏移了50px. 注意偏移方向以及盒子移动的方向.

在这里可以看到div已经压在p标签上了,已经脱标了.但是p标签并不没有发生变化.说明相对定位的元素依旧占有原有的位置.与浮动不同.设置浮动的话p标签会跑到最上面到最上面.这也是使用浮动可能会让其它元素受到的影响

打开开发者工具看一下:

相对定位并不会改变标签原有的特点,如这里的div.块级元素独占一行.定位之后,依旧独占一行

其中这里有一些问题需要注意:

设置定位方式后,不要忘记设置偏移量.不然会没有效果设置偏移量时,只需水平和垂直方向各设置一个就行.但是如果都写上.那么水平方向以left(左)为主,垂直方向以top(上)为主

2.2 绝对定位

position: absolute;

绝对定位:相对于非静态定位的父元素进行定位移动

绝对定位会先找已经定位的父元素,如果有这样的父元素,会以父元素为参考进行定位.如果有父元素,但是没有定位,会以浏览器的窗口为参考进行定位.

代码演示:

依旧是刚才的代码, 没设置绝对定位前的效果

设置绝对定位后的效果:

可以看到设置绝对定位之后,p标签跑到最上面了.此时的div已经脱标(脱离标准文档)了.

打开开发者工具:

我们可以看到设置绝对定位之后的div已经不是块级元素了. 而是变成行内块元素.

在没有设置偏移量前可以看到目前这个div与浏览器还有一段缝隙的

如果给它加一个向左偏移0之后,可以看到此时div已经和浏览器贴在一起了

在刚开始讲绝对定位时,就谈到过如果有父元素,但是父元素没有设置定位,就会以浏览器的窗口为参照进行定位.

上述案例中的div是body,但是body并没有设置定位,所以div就是以浏览器为参照进行定位了

2.2.1 子绝父相

刚才谈到绝对定位可以以父元素为参照进行定位,有两个条件,一是有复原色,二是父元素有定位. 父元素的定位是相对定位和绝对定位其实都可以,但是一般都会给父元素设置相对定位,子元素设置绝对定位.这个就叫做子绝父相.

粉色div盒子使蓝色div盒子的父元素,给粉色div设置相对定位,而蓝色div设置绝对定位.此时蓝色div就是以粉色div为参考进行定位.

注意: 绝对定位寻找父元素的方式为就近寻找.在开发过程中,一个元素可能有很多父元素,如果要给它设置绝对定位,就是以它最近的父元素逐个往外找,直到找到或者以浏览器为参照

2.3 固定定位

position: fixed;

固定定位是相对于浏览器进行定位移动. 简单来说就是元素始终位于浏览器的某个位置上,比如一些导航栏,就是使用的固定定位

代码演示:

设置固定定位前

加上固定定位后:

可以看到div已经脱标了,不在占有原有的位置.固定定位的参考位置是浏览器, 使用固定定位的标签具有行内块元素的特点.

3. 元素的层级关系

定位可以是元素脱标,而浮动也可以使元素脱标.那么它们之间的层级关系是什么样的呢?

直接给结论:定位>浮动>标准流

定位还分相对定位,绝对定位和固定定位,如果是定位使标准流脱标,那么它们之间的层级关系则是:

相对定位,绝对定位和固定定位默认的层级相同.需要书写的位置,写在下面的层级关系更高,会覆盖写在上面的元素.

4. 总结

定位分为静态定位,相对定位,绝对定位和固定定位.要清楚知道每种定位的特点,和绝对定位中的子绝父相,以及各元素之间的层级关系.

感谢你的观看!希望这篇文章能帮到你!

专栏:《web前端开发》 在不断更新中,欢迎订阅!

“愿与君共勉,携手共进!”