整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
定位<h2>元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
属性定义及使用说明
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
| 默认值： | static |
|---|---|
| 继承： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.position="absolute" |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
属性值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
ss 中的定位，是布局中常用的一种方法，它可以使html元素脱离文档流，重新定位。语法如下：
position: static|relative|absolute|fixedposition 有四个值，static（默认静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），通常配合left、top及z-index属性使用（static除外）。
静态定位很简单，html元素默认就是静态定位，和正常情况下html元素在文档流中的排版一样。left、top和z-index属性对应静态定位来说不起任何左右，如下图示例：
图1
图1中的模块1，虽然设置了position:static,但是其表现和没有设置是一样的，按照标准文档流进行排版。
相对定位是html元素相对于它原来在标准文档流中的位置来定位的。如果不设置top、left的话它和静态定位一样，不同之处就是它可以设置top、left和z-index属性，如下图示例：
代码：
图2
显示效果：
图3
图3中模块2使用了相对定位，脱离正常的文档流，相对于原始位置左边50px，顶部30px，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有偏移。
相对定位的元素宽度默认和块级元素一样，宽度100%；
绝对定位时当父级元素也是定位元素（包括相对定位、绝对定位、固定定位）时，它就相对于父级元素的左上角定位，如果父级元素没有定位或者是静态定位，那就相对于浏览器窗口左上角定位。如下示例：
代码：
图4
显示效果：
图5
图5中模块3和模块2-1都设置为绝对定位，模块3的父级没有定位，模块2-1的父级是模块2（相对定位）。所以模块3相对于页面左上角位置定位，模块2-1相对于模块2左上角定位。
绝对定位不保留原来的位置，完全是脱离文档流，且其宽度变成不是100%（类似行内元素），它通常都是和有定位的父级元素一块使用才有意义。
固定定位，通俗讲就是固定到屏幕上，它和绝对定位一样完全脱离文档流，不保留原来的空间位置。唯一的区别就是它是始终都是相对于浏览器窗口左上角定位，不管其父级元素设置了定位。如下示例：
代码：
图6
显示效果：
图7
图7中模块4的设置为固定定位，它的父级时模块2（相对定位），可以看出和模块2-1（绝对定位）的区别，模块4不是相对于父级的。
再看下面这个示例，当滚动滚动条时模块4始终定在那块不动。
图8
注意看上面图8中，模块4显示在模块3下面，看下图模块3的z-index明明比模块4的小，为什么会显示在模块4上面？
图9
原因是模块4的父级模块（相对定位），它的z-index是100和模块3相同，又因为模块3元素在模块2元素后面，所以模块3显示在模块4上面，如果把模块2的z-index改成101，如下图：
图10
模块4显示在模块3上面了，所以z-index的属性是同级元素相互进行比较大小。
在网页布局中，定位在早期使用较多，现在不建议过多使用定位，只有在特殊情况下使用，比如返回顶部按钮效果，或左侧导航栏，菜单栏固定定位，不跟随页面滚动等。
本篇主要知识点：
定位 | 行为 | 在文档流中 |
static | 默认行为；元素按顺序堆叠并相互了解 | 是的 |
relative | 相对于其在流中的原始位置定位 | 是的 |
fixed | 相对于浏览器窗口定位 | 不在 |
absolute | 相对于最近的非静态 ( fixed, relative, absolute) 元素定位 | 不在 |
感谢关注，欢迎指正错误及补充。
上篇：前端入门——浮动float
上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。
定位常用于布局，利用定位可以将元素精确摆放在任何位置。定位布局共有4种方式，分别是：
固定定位（fixed）。
相对定位（relative）。
绝对定位（absolute）。
静态定位（static）。
static是所有元素的默认值，存在于正常流中，不能使用偏移属性（top、bottom、left以及right）。通常所说的定位，使用的是另外3个关键字。
固定定位不如其他定位类型用得普遍，确是最直观也是最容易理解的定位方式。给一个元素设置position: fixed就能将元素放在视口的任意位置。这需要搭配四种属性一起使用：top、right、bottom和left。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。
所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置。position:fixed固定定位元素的“包含块”是根元素，唯一可以限制固定定位元素的就是<html>根元素。可见固定定位是很强悍的一个属性。固定定位最常用于实现“回顶部特效”。
在CSS中，我们可以使用position:relative来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
position:relative也是结合top、bottom、left和right这4个属性一起使用的，其中，先使用position:relative让元素成为相对定位元素，接着使用top、bottom、left和right这4个属性来设置元素的相对定位。一般只会用到其中两个属性。
注意，在默认情况下，固定定位元素的位置是相对浏览器而言的，而相对定位元素的位置是相对于原始位置而言的。
绝对定位（absolute）会脱离正常流，并且会将元素变为块级元素。元素在被设为绝对定位后，其原先所占的空间会被删除，并且它会相对于包含块偏移，它的包含块就是离它最近的position属性不为static的祖先元素的内容区域。绝对定位是定位类型里的重量级选手。它经常跟JavaScript配合，用于弹出菜单、工具提示以及消息盒子。
在默认情况下，元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。
说完定位布局后不得不提的一个属性就是层叠顺序。浏览器将HTML解析为DOM的同时还创建了另一个树形结构，叫作渲染树（render tree）。它代表了每个元素的视觉样式和位置。同时还决定浏览器绘制元素的顺序。顺序很重要，因为如果元素刚好重叠，后绘制的元素就会出现在先绘制的元素前面。定位元素时，这种行为会改变。浏览器会先绘制所有非定位的元素，然后绘制定位元素。默认情况下，所有的定位元素会出现在非定位元素前面。但是对相对定位或绝对定位的元素来说，通常无法用改变标记位置的方法解决层叠问题。相对定位依赖于文档流，绝对定位元素依赖于它的定位祖先节点。这时候需要用z-index属性来控制它们的层叠行为。
层叠属性类似于三维的Z轴，以对象为中心，前后移动，语法用z-index表示，后面可取值，值较大的元素将叠加在z-index值较小的元素之上。以下是层叠对象的完整语法。
z-index : auto | number层性z-index后面接的值分别表示如下。
属性的默认值为auto，如果设置是数字，可正可负。如果为正，最大数的对象将在前面，数值越大，越往前端显示；如果为负值，将会出现对象之后。
注意：第一，z-index 只在定位元素上生效，不能用它控制静态元素。第二，给一个定位元素加上z-index可以创建层叠上下文。
一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比如给一个定位元素加上z-index的时候，它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。
所有层叠上下文内的元素会按照以下顺序，从后到前叠放：
如果发现 z-index 没有按照预期表现，就在DOM树里往上找到元素的祖先节点，直到发现层叠上下文的根。然后给它设置 z-idnex，将整个层叠上下文向前或者向后放。还要注意多个层叠上下文嵌套的情况。
如果能够依靠文档流，而不是靠明确指定定位的方式实现布局，那么浏览器会帮我们处理好很多边缘情况。记住，定位会将元素拉出文档流。一般来说，只有在需要将元素叠放到别的元素之前时，才应该用定位。
本文我们向读者重点介绍了对象的定位、定位的基本语法和层叠顺序设。属性定位由position表示，除了可以用z-index控制层的层叠顺序外，还可以用top、right、bottom和left设置对象在父对象的定位。定位与浮动也是网页设计中比较难掌握的知识点，读者在了解相关知识后需要多动手练习。更好地在实际应用中进行网页设计。
为初学者提供学习指南，为从业者提供参考价值。我坚信码农也具有产生洞见的能力。关注【码农洞见】，一起学习和交流吧！
*请认真填写需求信息，我们会在24小时内与您取得联系。
