整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SS 定位 (Positioning) 属性允许你对元素进行定位。
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
<div>
some text
<p>Some more text.</p>
</div>在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
定位 h2 元素：
代码如下：
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>效果图如下：
所有主流浏览器都支持 position 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
默认值： | static |
继承性： | no |
版本： | CSS2 |
JavaScript 语法： | object.style.position="absolute" |
值 | 描述 |
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 属性的值。 |
iv+css是现在比较流行网页排版技术，其中css的灵活运用是不可缺少的部分。在完成一些复杂的页面排版都是由最简单的排版方式演变而来的，应读者的要求今天给大家讲解一下css最基础的布局元素对齐，在css中我们可以用多种属性来实现对齐元素，如果你是技术大牛的话这篇文章就可以直接忽略了，不喜勿喷！
css中元素对齐方式有哪些？
1、块元素的对齐
块元素默认占一行，如果一行内已经出现了块元素，再添加其他块元素会自动换行的。块元素也可以嵌套其他的块元素使用，块元素一般是作为容器出现的，比如说HTML中常出现的div，块元素和行元素是可以通过css相互转换的。块元素可以使用“margin” 属性来水平对齐，可通过将左和右外边距设置为 "auto"，来对齐块元素。比如.nav{margin-left:auto;margin-right:auto;width:70%;}，如果宽度是100%则对齐没有效果，我们可以把这段代码改成.nav{margin:0 auto;}来实现导航板块内容的水平对齐。块元素存在一个外边距处理方面的 BUG会在个别浏览器出问题，使用的时候一定要注意这个问题。
2、使用 position
对齐元素的方法之一是使用绝对定位，比如说这段代码：.nav{position:absolute;right:0px;width:300px;}。但是在使用position水平对齐元素时会出现兼容问题，使用IE8之前浏览器，如果容器设置了明确宽度，忘记声明！DOCTYPE左右两侧会增加十七像素的外边距。为了避免这样问题使用 position对齐元素，一定不要忘记 !DOCTYPE声明。
3、使用float
对齐元素的另一种方法是使用 float 属性，如这段代码.right{float:right;width:300px;}，这样对齐元素也会出现浏览器兼容，，使用IE8之前浏览器，如果使用了使用 float 属性时，忘记声明！DOCTYPE左右两侧会增加十七像素的外边距，这一点和position是一样的，为了避免这样问题使用 position对齐元素，也一定不要忘记 !DOCTYPE声明。
关于“css中的元素对齐”先聊到这。每天学习一个知识点，每日寄语”不管有多少面墙阻挡，总还有一道属于你的明媚阳光。”如转载清标明出处。
上一篇文章，介绍了魔鬼属性——浮动布局。浮动布局比较灵活，但是不容易控制。而定位布局使用户精准定位页面中的任意元素成为可能。因此在实际开发中，大家应该灵活使用这两种布局方式，这样才可以更好地满足开发需求。
定位常用于布局，利用定位可以将元素精确摆放在任何位置。定位布局共有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小时内与您取得联系。
