详解CSS position属性
来源:互联网 发布:itc智能网络广播系统 编辑:程序博客网 时间:2024/05/07 18:05
1
2
3
4
5
6
CSS代码
CSS
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
1
2
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; }
效果图
包含块
这是相对定位元素的包含块,为最近的块级框,表的单元格或行内块的内容边界,相对定位元素相对于其包含块进行偏移,我们可以简单理解为相对于其原来的位置进行偏移。
3.非根元素的包含块,如果该元素的position是absolute,则包含块为最近的position不是static的祖先元素。
简单来说,它的包含块会从父级元素一直向上查找,找到第一个position不是static的元素为止。
偏移属性
前面的例子中已经涉及到偏移属性,它指的是元素相对于其包含块的偏移,我们称其为偏移属性,分别是top,bottom,left,right,依次代表上下左右。他们的值可以是具体的数值,也可以是百分比。如果是百分比,top和bottom是相对于包含块高度的百分比,left和right是相对于宽度的百分比。它们也可以设置负值,即有可能将元素移动到包含块的外边。
绝对定位
接下来我们了解一下绝对定位的详细细节。
基本的绝对定位
一个元素被设置为绝对定位时,会脱离文档流,然后相对其包含块进行偏移。
一般来说,我们会将一个元素设置为relative来作为absolute元素的包含块,我们看看下面的例子:
HTML代码
1
2
3
4
5
6
7
8
CSS代码
CSS
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }
.absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
.light { background: #f3d6d6; top: 70px; left: 80px; }
1
2
3
4
div { background: #0094ff; width: 250px; height: 100px; }
.relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; }
.absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; }
.light { background: #f3d6d6; top: 70px; left: 80px; }
效果图
绝对定位的重叠问题
我们可以看到,第二个绝对定位元素盖住了第一个元素,那怎么让第一个元素盖住第二个元素呢,这就要用到z-index属性,这个属性表示元素的叠加顺序,默认情况下,z-index为0,数值越高的元素层级越高,就可以盖住低于其层级的元素,我们设置第一个原色的z-index为10,结果如下
绝对定位的重叠问题
如果两个元素的层级相同,则越后面的元素会覆盖前面的元素,默认情况下,第二个元素就会盖住第一个元素。
固定定位
fixed定位很简单,类似与absoulte,但是它的包含块就是浏览器窗口,相对来说简单很多。常见的应用比如固定导航,回到顶部。在这里不再赘述,大家可以查找相关资料。
相对定位
relative定位的元素进行偏移后,不会脱离文档流,还有占据原本的空间。除此之外,我们还要注意一个细节:如果元素设置了margin为负值之后发生重叠的情况下,相对定位的元素会覆盖普通元素。我们看看下面的例子:
HTML代码
1
2
3
4
5
6
CSS代码
CSS
div { background: #0094ff; width: 250px; height: 100px; }
.no-relative { background: #ff6a00; width: 200px; height: 100px; }
.relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
.minus-margin { margin-top: -30px; }
1
2
3
4
div { background: #0094ff; width: 250px; height: 100px; }
.no-relative { background: #ff6a00; width: 200px; height: 100px; }
.relative { background: #ff6a00; width: 200px; height: 100px; position: relative; }
.minus-margin { margin-top: -30px; }
效果图
未相对定位时没有覆盖
默认情况下,两个元素都是正常的元素,设置了负的margin属性后,后面的元素会覆盖前面的元素,我们修改第一个元素的class为relative,可以看到效果如下:
相对定位时覆盖
添加了相对定位后,第一个元素就会覆盖其他正常的元素了。
relative属性最经常的一个应用应该是作为absolute元素的包含块了,为了限制absolute元素的偏移位置,常常设置其父元素为relative来作为其包含块。
应用举例
position的应用非常频繁,下面我来说说常见的一些场景:
产品标签
在电商网站中,我们常常可以看到产品的左上角或右上角有一些比如“新品”,“促销”,“热卖”等标签,比如下图:
产品标签
这个是怎么实现的呢,我们来模拟一下:
HTML代码:
1
2
3
4
5
6
CSS代码:
CSS
.product { width: 150px; height: 150px; background: #0094ff; position: relative; }
.hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }
1
2
.product { width: 150px; height: 150px; background: #0094ff; position: relative; }
.hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; }
效果如下:
产品标签
如图所示,右上角有一个标签。原理很简单,就是设置父元素相对定位,标签元素绝对定位,然后相对于父元素偏移到右上角。
自动完成框
自动完成框是一个非常常见的应用,其生成的下拉菜单也是用到了position属性。我们先看看下面的效果:
、
自动完成输入框
这是一个很简单常见的下来自动完成框,我们来看看它的HTML和CSS代码:
HTML代码
- position属性
- position应用
- position是什么
- position翻译
1
2
3
4
5
6
7
- position属性
- position应用
- position是什么
- position翻译
CSS代码
CSS
.search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }
ul, li { list-style-type: none; }
ul { border: 1px solid #ccc; width: 210px; position: absolute; }
li { padding: 5px; }
1
2
3
4
.search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; }
ul, li { list-style-type: none; }
ul { border: 1px solid #ccc; width: 210px; position: absolute; }
li { padding: 5px; }
这个原理也很简单,通过设置下拉菜单为绝对定位,然后设置其left属性与输入框对齐。
当然position的应用还有很多,比如布局,比如fixed可以用来做固定导航菜单,网页右下角的固定菜单等,有兴趣的同学可以自行查找相关资料进行学习。
总结
position属性是一个容易让初学者迷惑的属性,尤其是absolute和relative的应用。要用好它们,首先要从absolute和relative的基本特性开始了解,理解了他们的特性之后应用起来就得心应手了,了解基本原理后,多多写几个例子从实践中去体会它们的特性,慢慢的就会熟悉了。
- CSS属性position详解
- 详解CSS position属性
- css position 属性详解
- CSS position属性详解
- css的position属性详解
- CSS定位属性Position详解
- css下position属性详解
- CSS定位属性Position详解
- CSS的Position属性详解
- CSS定位属性Position详解
- CSS的position属性详解
- CSS定位属性Position详解
- CSS定位属性Position详解
- CSS定位属性Position详解
- 详解CSS样式的position属性
- CSS position 属性(absolute、relative详解)
- CSS中的Position、Float属性详解
- css的float,position属性详解
- *LeetCode 29. Divide Two Integers
- iOS 图像开发之Quartz 2D
- 这一段时间的事
- Java Swing小结
- Introduction to the SQL Server Analysis Services Logistic Regression Data Mining Algorithm
- 详解CSS position属性
- 设计模式系列12---遍历统一的迭代模式
- Linux入门教程:CDN加速
- hadoop2.7.0-HA集群部署
- http-http协议
- 001Two Sum (C)
- 工作要求
- Android开发,在Activity中切换不同的Fragment
- 详解CSS float属性