CSS position属性详解：absolute、relative、fixed等五个值
87 浏览量
更新于2024-09-01
收藏 243KB PDF 举报
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页未读，立即下载
2021-01-04 上传
2019-04-12 上传
2023-04-06 上传
2020-10-30 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
2023-08-23 上传
weixin_38650629
- 粉丝: 4
- 资源: 897
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
