CSS中的Position属性
也许你看到这个标题觉得很简单，确实这是一篇关于CSS中Position属性基础知识的文章，但是关于Position的一些细节也许你不了解。
1、简介
position有五个属性： static | relative | absolute | fixed | inherit
static 和 inherit : 没什么值得介绍的。
relative : 相对于元素自身的定位。
absolute ：相对于包含块的定位。
fixed : 相对于窗口的定位。
2、包含块
包含块就是 top | right | bottom | left 参考的元素。
absolute的包含块指的是：该元素最近的具有定位设置的父元素，即最近的position属性值不为static的祖先元素举个例子：
<body>
<div id="outer" style="position:absolute">
<div id="inner">
<span style="position:absolute">span</span>
</div>
</div>
</body>
对于span元素来讲，它的包含块是#outer，而不是#inner,因为#outer设置了 position:absolute。值得注意的是，只要#outer设置了 absolute | relative | fixed span元素的“定位父元素”就是#outer，如果outer没有设置三种属性的其中之一，则span的包含块就是html元素。
relative的包含块指的是：元素自身。
3、top | right | bottom | left 的细节。
也许你会想当然的认为这些值有什么细节可言，那你就错了。在此以left为例：
left值 = “定位父元素”border内边 到 该元素margin外边的举例 ，简单的记忆就是“border内,margin外”。
right | bottom | left 也是这种道理
4、z-index
关于z-index的细节，这里就不说了，因为觉得自己表达不清，而且《CSS权威指南》相应章节里对z-index讲的非常清楚(特别是叠放上下文的相关知识)，这些知识是非常有用的。
如果你能看懂下面这个层叠顺序，则证明你对z-index的学习已经非常成熟了。要注意其中#one1 元素 #two元素的层叠顺序。
例子：http://www.kangchangan.cn/cnblog/zIndexStackingContext.html
5、postion 与文档流
只要元素设置了 postion : absolute | relative | fixed ， 该元素就会脱离文档流。
但是relative元素是个特例，因为该元素对然脱离了文档流，但是它原本所占的空间仍然占据文档流。
例如：
Code
<!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>relative</title>
<style type="text/css">
* { margin:0; padding:0;}
body { padding:50px; background-color:#FFFFCC;}
span{
position:relative;
left:50px;
top:40px;
background-color:#FF9900;
}
</style>
</head>
<body>
<p> rain-man rain-man rain-man rain-man rain-man <br />
rain-man rain-man <span>cnblog</span> rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br />
rain-man rain-man rain-man rain-man <br /></p>
</body>
</html>
6、positon 与 display
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
<span style="position:absolute; width:100px; height:50px;">span</span>这是完全正确的，
<span style="position:absolute; display:block; width:100px; height:100px;">span</span>，这里的display:block就是多余的了。
7、position 与 float
一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
8、Bug
Bug1:
参考网页: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html，哎这个就是IE的bug了，解决办法就是为#container设置 z-index:11 || 大于10的整数。
Bug2：
bug页面：http://www.kangchangan.cn/cnblog/floatPosition.html
解决页面：http://www.kangchangan.cn/cnblog/floatPosition2.html
相关解释已经在解决页面了。
分享到：
相关推荐
CSS中的position属性用于指定元素在文档流中的定位方式，它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值：static、fixed、relative、absolute，下面逐一详细说明。 1. static定位：这是...
在CSS中，`background-position`属性是一个非常重要的部分，它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像，从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
在CSS布局中，`position`属性是至关重要的，它决定了元素在页面上的定位方式。`position`有四个主要的值：`static`、`fixed`、`relative`和`absolute`，还有一个较新的值`sticky`，不过在这里我们主要讨论前四个。 ...
本文向大家描述一下DIV CSS布局中的position属性的用法，position属性主要有四种属性值，任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。 如何学习DIV+CSS...
在网页设计中，CSS的position属性是一个非常重要的属性，它允许开发者控制元素在页面上的定位方式。position属性有几个值：static、relative、absolute、fixed以及最近添加的sticky。 1. static：这是position属性...
其中，CSS position 属性可以取5种值：position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档...
通过使用CSS的position属性，我们可以轻松地定位和装饰一棵圣诞树。通过添加动画效果和响应式设计，我们可以进一步增强视觉效果和用户体验。这个简单的项目不仅可以帮助你掌握CSS定位技巧，还可以为你的网站或应用...
"CSS Position"是一个关键概念，它决定了元素在页面上的位置和排列方式。理解并掌握CSS定位对于创建响应式、动态且布局精确的网页至关重要。 **定位模式** CSS提供了几种定位模式，包括静态定位（static）、相对...
" Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念，它们可以帮助开发者建立复杂的布局，实现多年的梦想。通过这两个属性，可以将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是...
CSS 文字属性用于控制文本在网页中的显示方式。以下是一些常用的 CSS 文字属性及其功能： - **color**: 设置文字的颜色。例如：`color: #999999;`。 - **font-family**: 设置字体系列。例如：`font-family: 宋体, ...
### div的position属性详解 #### 一、流动模型（块元素与内联元素） 流动模型是CSS布局的基础，指的是在没有特别指定定位方式的情况下，元素按照文档流的自然顺序排列。 - **块元素**：默认情况下，每个块元素...
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文件主要探讨了`position`属性的两个关键值：`relative`和`absolute`，这些知识点对于创建复杂的网页布局至关重要。 首先，...
在CSS布局中，`position`属性起着至关重要的作用。它用于定义元素如何在页面上定位，决定了元素是否会被其他元素所影响，或者它是否会覆盖其他元素。`position`属性共有四种取值：`relative`、`absolute`、`fixed` ...
利用CSS的`position`、`width`、`height`等属性可以实现定位和布局；通过DOM的`appendChild`和`removeChild`方法可以动态添加或删除元素，实现动态更新网页内容。 此外，还有许多其他CSS属性和DOM属性，如`display`...
CSS（层叠样式表）是一种用于描述网页呈现样式的语言，而position属性是CSS中用于控制元素位置的重要属性。position属性定义了元素的定位类型，其不同的值决定了元素在页面上的定位方式，以及它与其他元素的相对关系...
1. 流动布局：CSS 2.0中的流体布局依赖于`display`属性，如`block`和`inline`，以及`width`和`height`来创建多列或多行布局。 2. 表格布局：`table`、`table-cell`等值可以将元素呈现为表格形式，便于对齐和布局。 ...
字体属性在CSS中用于控制文本的视觉表现形式，包括字体家族、风格、变形、加粗以及大小等。掌握这些属性有助于创建多样化的文本样式，提升网页的可读性和美观度。 - **字体家族（`font-family`）**：用于指定文本应...