CSS position属性详解：absolute、relative、fixed等五个值
62 浏览量
更新于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
我的内容管理
展开
最新资源
- 前端协作项目：发布猜图游戏功能与待修复事项
- Spring框架REST服务开发实践指南
- ALU课设实现基础与高级运算功能
- 深入了解STK：C++音频信号处理综合工具套件
- 华中科技大学电信学院软件无线电实验资料汇总
- CGSN数据解析与集成验证工具集：Python和Shell脚本
- Java实现的远程视频会议系统开发教程
- Change-OEM: 用Java修改Windows OEM信息与Logo
- cmnd：文本到远程API的桥接平台开发
- 解决BIOS刷写错误28：PRR.exe的应用与效果
- 深度学习对抗攻击库：adversarial_robustness_toolbox 1.10.0
- Win7系统CP2102驱动下载与安装指南
- 深入理解Java中的函数式编程技巧
- GY-906 MLX90614ESF传感器模块温度采集应用资料
- Adversarial Robustness Toolbox 1.15.1 工具包安装教程
- GNU Radio的供应商中立SDR开发包：gr-sdr介绍
