CSS中怎么使用定位
今天小编给大家分享一下CSS中怎么使用定位的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
陇南网站建设公司创新互联公司,陇南网站设计制作,有大型网站制作公司丰富经验。已为陇南1000多家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱,请找那个售后服务好的陇南做网站的公司定做!
CSS中定位介绍
position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位。
CSS中一共有3种定位如下:
属性值 | 描述 |
---|---|
fixed | 设置固定定位。 |
relative | 设置相对定位。 |
absolute | 设置绝对定位。 |
固定定位实践
在实践固定定位之前我们先看看代码结构是什么样子的呢。
代码块
定位
结果图
现在笔者将h2元素设置为固定定位,看看和上面的结构实践有什么区别,然后我们在分析一些固定定位的特点。
代码块
定位
结果图
固定定位特点分析如下:
固定定位,它是相对于浏览器窗口进行设置定位,不管页面如果滚动,固定定位的元素位置不会受到任何影响。
固定定位的元素特点:它已经脱离了标准文档流。
固定定位的元素特点:它的层级比标准文档流的元素要高,所以我们给h2标签设置了固定定位会压盖到div标签。
固定定位的元素特点:h2标签在div标签之上,所以固定定位的元素已经不再占用任何空间。
相对定位实践
在实践相对定位之前我们先看看代码结构是什么样子的呢。
代码块
定位