本日将要引见的是CSS中的定位属性position的各个属性值及其特征,具有肯定的参考作用,愿望对人人进修定位有所协助
【引荐课程:CSS教程】
position属性
position 属性就是用来划定元素的定位范例,即把元素安排到一个静态的、相对的、相对的、或牢固的位置中。因此在position属性中它有四个属性值分别为:static、relative、absolute、fixed。接下来在文章中将细致引见这四个属性值的用法及特征。
static属性值
static属性示意默许值,即没有定位,元素出现在平常的流中。疏忽了 top, bottom, left, right 或许 z-index 声明
<style> div{ width:100px; height:100px; border:10px solid #ccc; } div.static { position: static; border: 10px solid pink; } </style> </head> <body> <div></div> <div class="static">运用了 position: static;</div> </body>
效果图:
relative属性值
示意相对定位的元素,能够经由过程top,bottom,left,right的设置相对于其平常(本来自身)位置举行定位。它是默许参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点举行定位。
1、相对定位不会影响元素自身特征
2、 不会使元素离开文档流(元素底本位置会被保存)
3、没有定位偏移量时对元素无影响
4、提拔层级,能够运用z-index来转变一个定位元素的层级关联,从而转变元素的掩盖关联,值越大越在上面
div{ width:200px; height:200px; background-color: pink; } div.relative { position: relative; background-color:lightblue; left:45px; } </style> </head> <body> <div>父元素 <div class="relative">子元素</div> </div> </body>
效果图:
absolute属性值
示意相对定位的元素,相对于 static 定位之外的第一个父元素举行定位。它的特征有以下几个方面
1、 使元素完整离开文档流,即在文档流中不再占位
2、能够转变内联元素的特征,即在内联元素中能够设置宽高
3、使区块元素在未设置宽度时由内容撑开宽度
4、 相对于近来一个有定位的父元素偏移,若其父元素没有定位则逐层上找,直到找到body为止。
5、相对定位平常合营相对定位运用(子绝父相)
<style> div{ width:200px; height:200px; background-color: pink; } div.absolute { position:absolute; background-color:lightblue; left:145px; top:140px; } </style> </head> <body> <div>父元素 <div class="absolute">子元素</div> </div>
效果图:
fixed属性值
示意牢固属性值,生成相对定位元素,相对于浏览器窗口举行定位。就是不管你怎样转动转动条,元素依旧在谁人位置不动
<style> body{height: 2000px;} div.fixed { width:200px; height:200px; position:fixed; background-color:lightblue; left:145px; top:140px; } </style> </head> <body> <div class="fixed">牢固元素</div> </body>
效果图:
总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。
以上就是怎样明白position属性值及其特征的细致内容,更多请关注ki4网别的相干文章!