认识position定位

php中文网
发布: 2016-09-08 08:29:14
原创
2254人浏览过

html中,改变布局有两种方式一种是float一种是position定位,今天解释一下什么position定位。

position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父元素或者浏览器窗口进行偏移

postion属性我们成为定位,它有4个不同类型的定位,这些类型会影响元素的生成方式,下面我们详细说明position属性。

Position4个属性值:1.static2.relative3.absolute4.fixed。这几种属性。

Static:是默认定位。不改变任何位置,网页也就按照正常的文档流规则排列。

Relative:是相对定位。元素则按照正常的文档流来规则排序。但可以通过lefttopbottomrightcss规则来改变元素的位置。让网页看起来更加美观。

Absolute:是绝对定位:元素会脱离文档流,元素可以通过:topleftrightbottomcss规则来改变元素的位置。让网页看起来美观。

Fixed:是固定定位:元素会脱离正常的文档流,元素将被设置在浏览器上一个固定的位置上,不会随着元素滚动。元素可以通过:topleftrightbottomcss规则改变元素的位置。

Absolute:是生成绝对定位,相对于最近一级的定位不是static的父元素来进行定位的,元素设置成absolute后会脱离文档流,并且不占有原本的空间,后面的元素会顶替上去

relative翻译成中文称相对定位,设置了这个属性后,元素会根据top,left,bottom,right进行偏移,关键点是它原本的空间仍然保留

Fixed(老IE不支持)生成绝对(固定)定位的元素,通常相对于浏览器窗口来进行定位。

relative呢是生成相对定位的元素,相对于在普通的位置进行定位。

Static该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。

Inherit:继承属性,规定应该从父元素继承 position 属性的值。

!注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

  

  

  

 

以上就是我对html中css属性的position属性的解释,在css中position的功能是非常强大的,也是一个很实用的一个定位属性。对于position定位相信大家会在网页设计中很常用的一个属性,希望我的这些解释可以帮助到您。

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号