CSS position属性详解：absolute、relative、fixed等五个值

58 浏览量更新于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”>

<head>

<title>position:absolute定位</title>

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=”div2″>position:absolute定位测试</div>

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38650629

粉丝: 4
资源: 896

CSS position属性详解：absolute、relative、fixed等五个值

CSS position属性值absolute与relative的详细解析

CSS position属性详解：absolute, relative等

CSS position属性详解：relative, absolute, fixed

关于CSS position属性值absolute,relative的解释.zip

css position absolute relative

css position: absolute、relative详解

CSS position属性详解：absolute, relative与fixed定位

CSS position属性详解：absolute, relative, static, fixed

css position relative absolute 同时

css position属性为absolute时其百分值的计算

最新资源