position选项来定义元素的定位属性,选项有5个可选值:static、relative、absolute、fixed、inherit
属性值为relative、absolute、fixed时top | left | right| bottom | z-index才能起作用。
static(默认值)
relative(相对定位)
absolute(绝对定位)
立即学习“前端免费学习笔记(深入)”;
fixed(绝对定位,绝对与window浏览器,低版本浏览器不支持如ie6和ie7)
relative和static都是相对于文档其他元素进行定位,都属于相对定位的范畴,区别在于一个可用控制位移,一个不能
static(默认值)
如果使用默认值,在CSS中为元素定义top、left、right、bottom、z-index都不会生效
relative
relative的变现和默认值一样,只不过可用通过设置偏移量和z-index来控制相对于其他正常位置进行的偏移。
所有元素的定位(positon)默认值都是static,什么都不写就是相对定位,而使用position:relative在不设置topp、left、z-index、right、bottom值的情况下和默认值表现是一样的。
absolute和fixed
特点:
1、块级元素的宽度在未定义时不再为100%,而是根据内容自动调整
2、在不定义z-index的情况下,absoulte元素会覆盖在其他元素上。
3、它会脱离正常的文档流,不再占据空间,类似于属性0后的效果
absolute是相对上一个不为static的父元素进行绝对定位。如果不指定父元素的position,absolute将相对于整个属性1进行绝对定位。
fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。也就是说,不论网页如何滚动,该元素始终停留在屏幕的某个位置。如果我们希望左侧边控制栏始终对用户可见,就使用position:fixe来进行定位。
如果ie6和ie7不支持fixed属性怎么办
解决办法
用position:absolute
_top:expression(eval(属性2.documentElement.scrollTop))
以上就是CSS定位position使用介绍的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608030.html
微信扫一扫
支付宝扫一扫