手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS中position定位的个熟悉示例介绍
CSS中position定位的个熟悉示例介绍
摘要: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>

【CSS中position定位的个熟悉示例介绍】相关文章:

min-width最小宽度的作用介绍

CSS定义标题的实例讲解

CSS导航布局中当前页面的具体实现demo示例

CSS完美代码的五个要点

用css实现十字的布局示例代码

CSS写的简单表格示例

CSS中background-position使用技巧

谈CSS的标准和最佳示例-Div+CSS教程

CSS3正方体旋转示例代码

CSS相框效果示例代码

精品推荐
分类导航