- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS中定位属性值及其作用是什么，用法是怎样的呢
CSS中定位属性值及其作用是什么，用法是怎样的呢
Admin 2022-08-26 群英技术资讯 1259 次浏览
这篇文章给大家介绍了“CSS中定位属性值及其作用是什么，用法是怎样的呢”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。本篇文章给大家带来了关于css的相关知识，其中主要介绍了关于css的相对定位、绝对定位和固定定位的相关问题，css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、left、bottom、right来调整元素位置。
一、什么是定位？
css中的position属性，position有四个值：relative（相对定位）、absolute（绝对定位）、static（静态定位）和fixed（固定定位），通过top、left、bottom、right来调整元素位置
二、各个属性值的作用
| 属性值 | 作用 | 备注 |
|---|---|---|
| relative | 相对定位 | 参考元素本身 |
| absolute | 绝对定位 | 参考最近的祖先元素 |
| static | 静态定位 | 基本定位规定 |
| fixed | 固定定位 | 参考浏览器窗口 |
1、相对定位
相对定位的偏移元素参考的是元素本身，不会使元素脱离文档流，元素的初始位置占据的空间会被保留
html代码：
css代码：
网页效果：
可以看出相对定位是相对于元素本身来说，其中距离顶部30px，距离左边20px，并且没有脱离文档流
2、绝对定位
绝对定位是相对于已定位的最近的祖先元素，如果的最近的祖先元素没有设置定位，那么它的位置就相对于最初的包含块（body）
css代码：
网页效果：
可以看到绝对定位脱离文档流，由于父级元素未进行定位，所以是以最初的包含块（body）进行定位，现在将该元素的父级元素进行定位
css代码：
网页效果：
这里父级元素定位之后，该元素是以父级元素来进行定位
3、静态定位
没有特别的设定，不脱离文档流，遵循基本的定位规定，不能通过z-index进行层次分级
css代码：
网页效果：
可以看出红色块位置没变，可以知道static（静态，默认属性）通常情况下不会使用，position值一般为默认
4、固定定位
固定定位相对于浏览器窗口，脱离文档流，使用fixed的元素不会随窗口的滚动而滚动
html代码：
css代码：
网页效果（未设定固定定位）：
网页效果（设定固定定位）
可以看出进行固定定位后，即使窗口进行滚动，红色块的位置不变
三、相对和绝对定位
将三个色块来区别相对定位和绝对定位
未进行定位时，默认网页效果：
1、相对定位
css代码：
网页效果：
可以看出相对定位和默认定位效果是一样的
2、绝对定位
css代码：
网页效果：
这里红、黄、蓝色块重叠显示了，即脱离文档流
3、相对定位和绝对定位
为了使效果更加明显，这里将红、黄、蓝三色块进行一定程度的偏移
（1）相对定位
css代码：
网页效果：
（2）绝对定位
css代码：
网页效果：
四、相对、绝对定位与浮动
绝对定位和浮动都脱离文档流
1、相对定位
css代码：
网页效果：
2、绝对定位
css代码：
网页效果：
3、浮动
css代码：
网页效果：
可以看到浮动（float）为文字包围红色色块，但文本与红色色块的距离过近，无法设定边距
4、相对定位与浮动
css代码：
网页效果：
相对定位和浮动结合可以设定文本与红色色块的边距
5、绝对定位和浮动
css代码：
网页效果：
五、z-index的使用
若要将下面的色块中红色色块显示在黄色色块上面，可以使用z-index
css代码：
网页效果：
可以看到红色色块显示在红色色块上面，这里z-index的数值为40,20,30，实际上网页有时不止这些，可能上百，这里只是为了方便显示。
到此这篇关于“CSS中定位属性值及其作用是什么，用法是怎样的呢”的文章就介绍到这了,更多相关CSS中定位属性值及其作用是什么，用法是怎样的呢内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
HTML表头怎样设置垂直对齐，方法是什么？
HTML表头怎样设置垂直对齐，方法是什么？想对这方面内容了解清楚的朋友，可以看看小编所整理的资料。
-
用CSS怎样写垂直手风琴菜单，代码是什么
对于开发者来说目前最流行的就是css3,，有很多想不到的效果都可以用CSS3实现，那么今天小编就将为大家分享用CSS3实现的垂直的手风琴折叠菜单。
-
CSS中按钮不可点击效果怎样实现，方法是啥?
CSS中按钮不可点击效果怎样实现？在一些特殊的情景下，我们需要暂时设置按钮不可点击，那么CSS怎样禁止button点击呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
-
用纯CSS写文本溢出截断省略效果怎么做，优缺点是什么
这篇文章主要介绍了纯CSS实现“文本溢出截断省略”的几种方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
-
Canvas中如何填上渐变色的效果，代码是什么
在我们打开某个网页的时候，可能会看到有的页面中有颜色的渐变，感觉很好看，那么，这种渐变色是如何实现的呢？所谓渐变色其实就是颜色之间的过渡，而html5 Canvas渐变是一种用于填充或描边图形的颜色模式，所以，利用canvas如何实现颜色的渐变？本篇文章就来给大家介绍一下canvas渐变色的实现。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
