温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css相对定位、绝对定位和固定定位实例分析

发布时间:2022-08-03 17:14:38 来源:亿速云 阅读:160 作者:iii 栏目:web开发

这篇文章主要讲解了“css相对定位、绝对定位和固定定位实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css相对定位、绝对定位和固定定位实例分析”吧!

css相对定位、绝对定位和固定定位实例分析

一、什么是定位?

css中的position属性,position有四个值:relative(相对定位)、absolute(绝对定位)、static(静态定位)和fixed(固定定位),通过top、left、bottom、right来调整元素位置

二、各个属性值的作用

属性值作用备注
relative相对定位参考元素本身
absolute绝对定位参考最近的祖先元素
static静态定位基本定位规定
fixed固定定位参考浏览器窗口

1、相对定位

相对定位的偏移元素参考的是元素本身,不会使元素脱离文档流,元素的初始位置占据的空间会被保留

html代码:

css相对定位、绝对定位和固定定位实例分析
css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
css相对定位、绝对定位和固定定位实例分析

可以看出相对定位是相对于元素本身来说,其中距离顶部30px,距离左边20px,并且没有脱离文档流

2、绝对定位

绝对定位是相对于已定位的最近的祖先元素,如果的最近的祖先元素没有设置定位,那么它的位置就相对于最初的包含块(body)

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:css相对定位、绝对定位和固定定位实例分析

css相对定位、绝对定位和固定定位实例分析

可以看到绝对定位脱离文档流,由于父级元素未进行定位,所以是以最初的包含块(body)进行定位,现在将该元素的父级元素进行定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
这里父级元素定位之后,该元素是以父级元素来进行定位

3、静态定位

没有特别的设定,不脱离文档流,遵循基本的定位规定,不能通过z-index进行层次分级

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
可以看出红色块位置没变,可以知道static(静态,默认属性)通常情况下不会使用,position值一般为默认

4、固定定位

固定定位相对于浏览器窗口,脱离文档流,使用fixed的元素不会随窗口的滚动而滚动

html代码:

css代码:

网页效果(未设定固定定位):
css相对定位、绝对定位和固定定位实例分析
网页效果(设定固定定位)
css相对定位、绝对定位和固定定位实例分析
可以看出进行固定定位后,即使窗口进行滚动,红色块的位置不变

三、相对和绝对定位

将三个色块来区别相对定位和绝对定位

未进行定位时,默认网页效果:

css相对定位、绝对定位和固定定位实例分析

1、相对定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
可以看出相对定位和默认定位效果是一样的

2、绝对定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
这里红、黄、蓝色块重叠显示了,即脱离文档流

3、相对定位和绝对定位

为了使效果更加明显,这里将红、黄、蓝三色块进行一定程度的偏移

(1)相对定位

css代码:
css相对定位、绝对定位和固定定位实例分析
网页效果:
css相对定位、绝对定位和固定定位实例分析

(2)绝对定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析

四、相对、绝对定位与浮动

绝对定位和浮动都脱离文档流

1、相对定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析

2、绝对定位

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:
css相对定位、绝对定位和固定定位实例分析

3、浮动

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:
css相对定位、绝对定位和固定定位实例分析
可以看到浮动(float)为文字包围红色色块,但文本与红色色块的距离过近,无法设定边距

4、相对定位与浮动

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:
css相对定位、绝对定位和固定定位实例分析
相对定位和浮动结合可以设定文本与红色色块的边距

5、绝对定位和浮动

css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:
css相对定位、绝对定位和固定定位实例分析

五、z-index的使用

若要将下面的色块中红色色块显示在黄色色块上面,可以使用z-index
css相对定位、绝对定位和固定定位实例分析
css代码:

css相对定位、绝对定位和固定定位实例分析
网页效果:

css相对定位、绝对定位和固定定位实例分析
可以看到红色色块显示在红色色块上面,这里z-index的数值为40,20,30,实际上网页有时不止这些,可能上百,这里只是为了方便显示。

感谢各位的阅读,以上就是“css相对定位、绝对定位和固定定位实例分析”的内容了,经过本文的学习后,相信大家对css相对定位、绝对定位和固定定位实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI