CSS position属性详解:absolute、relative、fixed等五个值
CSS position 属性五个值的解释 CSS 中的 position 属性是用于定义元素在文档中的位置的,它有五个值:static、relative、absolute、fixed 和 inherit。其中,absolute 和 relative 是最常用的,fixed 也比较常用。 1. absolute(绝对定位) absolute 是生成绝对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过 top、right、bottom、left(简称 TRBL)定位。可以选取具有定位的父级对象(下文将说到 relative 与 absolute 的结合使用)或者 body 坐标原点进行定位,也可以通过 z-index 进行层次分级。absolute 在没有设定 TRBL 值时是根据父级对象的坐标作为始点的,当设定 TRBL 值后则根据浏览器的左上角作为原始点。 例如,下面的代码将创建一个绝对定位的 div 元素: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>position:absolute 定位</title> <style type="text/css"> html, body, div { margin: 0; padding: 0; list-style: none; } .center { margin: 30px; border: #999999 solid 10px; width: 400px; height: 300px; } .div1 { width: 200px; height: 200px; background: #0099FF; /*设定 TRBL*/ position: absolute; left: 0px; top: 0px; } </style> </head> <body> <div class="center"> <div class="div1">absolute 定位</div> </div> </body> </html> ``` 2. relative(相对定位) relative 是生成相对定位的元素,它会占据文档中的位置,并参照自身的位置进行定位。relative 定位的元素可以通过 top、right、bottom、left 等属性进行定位。 3. fixed(固定定位) fixed 是生成固定定位的元素,它会脱离文本流,并参照浏览器的左上角进行定位。fixed 定位的元素可以通过 top、right、bottom、left 等属性进行定位。 4. static(静态定位) static 是默认的定位方式,它会占据文档中的位置,并参照文档的流式布局进行定位。 5. inherit(继承定位) inherit 是继承父级元素的定位方式的元素,它会继承父级元素的 position 属性的值。 position 属性是 CSS 中一个非常重要的属性,它可以帮助我们更好地控制元素在文档中的位置和布局。但是,需要注意的是,position 属性的使用需要根据实际情况进行选择和调整,以避免布局混乱和样式 conflict。
下载后可阅读完整内容,剩余4页未读,立即下载
- 粉丝: 0
- 资源: 897
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解:基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例:初学者入门教程
- Eclipse平台上的可视化开发:使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解:网络存储架构与管理
- 递归算法解析:文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式:用PHP编写Shell脚本教程
- MyBatis与Spring完美整合:1.0.0-RC3详解