CSS中position定位的个熟悉示例介绍
CSS中position定位的个熟悉示例介绍
发布时间:2016-12-27 来源:查字典编辑
摘要:position属性有4个值:默认是static,无特殊定位,对象遵循HTML定位规则(一般使用margin、padding)fixed未支...

position属性有4个值:

默认是static,无特殊定位,对象遵循HTML定位规则(一般使用margin、padding)

fixed未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

absolute绝对定位(相对于最近的父元素,假如父元素都是默认的static,那么将相对body进行定位,如果父元素为relative定位,那么就相对该父元素进行定位)

relative相对定位(相对于自己,在原来位置上移动。与static相比,top、bottom、left、rigth生效,而static不生效)

relative不脱离文档流,而absolute脱离文档流。

例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>position</title>

<style type="text/css">

<>

</style>

</head>

<body>

<div id="demo">

<div>static: 默认值。无特殊定位,对象遵循HTML定位规则 </div>

<div id="sub">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>

<div>fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>

<div>relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>

</div>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类