CSS position属性详解：absolute、relative、fixed等五个值
243KB |
更新于2024-09-01
| 166 浏览量 | 举报
收藏
立即下载 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。
CSS position属性属性absolute relative等五个值的解释等五个值的解释
目前几乎所有主流的浏览器都支持position属性（"inherit"除外，"inherit"不支持所有包括IE8和之前版本IE浏览器，IE9、IE10
还没测试过），以下是w3school对position五个值的解释：
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
1、、absolute（绝对定位）（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过
top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者
body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点
的，当设定TRBL值后则根据浏览器的左上角作为原始点。具体案例如下：
复制代码代码如下:
<!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;
}
.div2{
width:400px;
height:300px;
font-size:30px;
font-weight:bold;
color:#fff;
background:#FF0000;
}
</style>
</head>
<body>
<div class=”center”>
<div class=”div1″></div>
<div class=”div2″>position:absolute定位测试</div>
下载后可阅读完整内容，剩余4页未读，立即下载
相关推荐
weixin_38650629
- 粉丝: 4
我的内容管理
展开
最新资源
- 掌握对称加密算法的密码加解密技巧
- 动易智能建站工具使用说明与站点搭建指南
- C/C++与Java面试题分享与解析
- 深入解析ZIP压缩算法的实现原理
- 数据库开发设计经典案例分析与应用
- 探索上海交通大学线性代数电子教材详情
- 探索myqq聊天功能的参考代码实现
- 电脑安全小助手：锁定电脑防乱动技巧
- 深入理解ASP.NET电子商务网站源码解析
- Java+Socket多人在线考试系统开发教程
- HEX2ASM 51反汇编工具 正式版发布
- VB编程中API函数的使用与示例解析
- 牛族SuperMysql连接器V1.6新版本发布
- 掌握LPI中级Linux系统管理技巧与认证要点
- 直观展示ucos2嵌入式操作系统的动画教程
- C++实现的电梯调度系统源代码
- 直观的LINQ查询构建器
- 全面掌握Excel公式技巧与应用
- Java SQL Server 2000 JDBC驱动下载 - jtds-1.2.2-dist.zip
- C#初学者项目：简易记事本应用开发指南
- Delphi人事管理系统的设计与实现功能详细介绍
- C#项目实践：简易NextDay程序开发
- VB.NET源代码：电子时钟安装程序的开发与实现
- Spring Security ACL权限控制实现与文件压缩处理
