下载文档原格式
详解CSS样式的position属性 平时在写css样式的时候position是我们⽐较常⽤的⼀个属性。
有时候会弄不清其⼏个属性值的真正区别。
不过⽤的时间久了，也就慢慢的明⽩了。
不过其实想⽤好position有时候还是需要些技巧的。
写篇博⽂总结下⾃⼰。
1. position的作⽤：⽤于设置对html元素的定位⽅式 2. position属性的值：值名称描述static position的默认值，设置此属性时，元素按照正常的流式布局往下排列inherit继承⽗元素的position值relative相对于其他元素的定位absolute相对于采⽤static定位的⽗元素的绝对定位fixed相对于浏览器的绝对定位 备注：如果给元素才⽤了top,left等定位属性时，只有relative,absolute,fixed才会有效果。
3.应⽤实例 这⾥主要记录是absolute和fixed属性值。
absolute与fixed的好处主要就是它的定位不拘束于其它同级元素，不想其它⼏种布局⾃⼰的定位会被其它元素所影响。
所以像做⼀些动画效果，div浮动效果的时候，这个两个属性值就尤为适合了。
结合z-index的使⽤ z-index ⽤于控制元素在页⾯中层级的位置，就跟⾼楼⼤厦的楼层⼀样，z-index则可⽤于控制所在的楼层。
absolute与fixed都⽀持z-index属性。
所以当⼏个元素采⽤absolute或者fixed属性时，为了达到层次显⽰的效果，z-index属性就很⽅便了。
⽰例：<html><title>Position</title><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#container{height:1000px;width: 960px;margin: auto;background-color: blue;}#roll-top {padding:20px;background-color:#525252;cursor: pointer;right:10px;}#roll-top,#below{position:fixed;top:85%;font-size:12px;color:#FFFFFF;}#below{width:100%;height:100px;background-color:#757575;z-index: -1;}</style><script type="text/javascript">function rollbackTop(){window.scrollTo(0);}</script></head><body><div id="container"></div><div id="roll-top" onclick="rollbackTop()">返回顶部</div><div id="below">我在下⾯</div></body><script></script></html> 像利⽤absolute做动画效果的例⼦在JQuery官⽅上⾯的例⼦还是⽐较多。
CSS布局学习之定位对于定位而言，有广义和狭义之分。
狭义定位：指的用position属性进行定位；广义定位：指的用标准流、浮动等各种方法完成网页元素的定位。
position属性有四个值：static 如果一个元素没有position属性，默认就是static静态定位的意relative 相对定位absolute 绝对定位fixed 固定定位（IE6不兼容，IE7及以上版本开始兼容）首先我们来学习相对定位：一、相对定位特性：1、相对定位不脱标任何一个元素，都可以进行相对定位。
只需要给元素设置：1position:relative;那么元素就是相对定位的元素了。
给蓝色盒子加上position:relative 后结论：页面没有任何改变，那么说明相对定位不脱标！接下来再给蓝色盒子添加：top:30px left:60px; 观察结果如下图2、相对定位可以根据偏移属性来确定位置，当标签设置了相对定位后，会使其从正常位置移走，但原来所占的位置并不会消失。
---再来测试，给蓝色盒子添加margin-bottom:100px,相对定位的盒子，可以施加margin，不过都是在自己的本来的位置施加产生效果。
接下来测试各种定位方向:Left:Top:Right:bottom3、任意的定位值要知道移动方向在相对定位中，可以任意选择定位的4个属性，并且属性的值可以为负数。
下面四种方向的搭配都是合法的：在使用这些组合的时候，你必须清楚知道这个盒子要怎么移动？【换算法】把所有都换算成top、left表示，你不就不晕了么？新建文件测试例如：1bottom：-50px2right: -30px;等价于1top:50px;2left:30px;例如：1bottom:60px;2left:-50px;等价于：1top:-60px;2left:-50px;引言：前面我们了解到任何元素都可以进行相对定位，那么元素是否也可以进行相对定位呢？答案是可以的。
CSS定位方式CSS定位方式一、定位属性元素框是指包含每个元素的矩形框。
元素内容与元素框共同形成了元素块。
定位是指设定元素块位置和大小。
上表中前6个属性是实际的定位属性，后面的4个有关属性用来设置元素框，或对元素框中的内容进行控制的属性。
其中，position 属性是最主要的定位属性。
2.position定位语法格式：Position: static | absolute | fixed | relative3.Absolute：参照浏览器的左上角，配合left、right、bottom 和top进行定位。
如果没有设置这四个值，则默认依据父级的坐标原点为原始点。
Position:absolute4.Relative：相对于某个元素的原始起点进行移动。
与绝对定位的区别：绝对定位的坐标原点为上级元素的原点，与上级元素有关；相对定位的坐标原点为本身偏移前的原点，与上级元素无关。
5.Fixed：固定定位。
是绝对定位的特殊形式，固定定位的容器不会随着滚动条的拖动而变化位置。
在视线中，固定定位的容器位置不会改变。
固定定位的参照位置不是上级元素块而是浏览器窗口。
使用固定定位的元素可以脱离页面，无论页面如何滚动，始终处在页面的同一位置上。
6.Z-index：层叠顺序。
从深度上设定元素层叠的次序，其方法是每个元素指定一个数字，数字较大的元素将叠加在数字较小的元素之上。
z-index: auto | number●Auto表示遵循父对象的定位●Number是一个无单位的整数值，可以为负值。
该属性只作用在position的属性值为relative或absolute的对象，不能作用在窗口组件上。
7.边偏移属性：用来描述元素块与包含元素块最近的边线之间的偏移量的属性。
left,right,top,bottomleft: auto | length●auto表示系统自动取值●Length表示由浮点数字和单位标识符组成的长度值或百分数■数值设置元素的绝对位置■百分数设置相对于其上级元素的位置二、Float定位1.float定位只能在水平方向上定位。
CSSposition居中（⽔平，垂直）css position是个很重要的知识点：知乎Header部分：知乎Header-inner部分：position属性值：fixed：⽣成绝对定位的元素，相对浏览器窗⼝进⾏定位（位置可通过：left,right,top,bottom改变）;与⽂档流⽆关，不占据空间（可能与其它元素重叠）relative：⽣成相对定位的元素（相对于元素正常位置）（left，right，top，bottom）；relative的元素经常⽤作absolute的元素的容器块;原先占据的空间依然保留absolute：⽣成绝对定位的元素（相对第⼀个已定位的⽗元素进⾏定位；若没有则相对<html>）（left,right,top,bottom）；与⽂档流⽆关，不占据空间（可能与其它元素重叠）static：默认值。
没有定位，元素出现在正常的⽂件流中（left,right,top,bottom,z-index⽆效！）inherit：继承从⽗元素的position值fixed⽰例：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<meta http-equiv="X-UA-Compatible" content="ie=edge">7<title>cascading style sheet</title>8<style>9 #test{10 width: 500px;11 height: 100px;12 position: fixed;13 top: 0px;14 left: 500px;15 border: 1px solid burlywood;16 background-color: #F2F2F2;17 z-index: 2;18 }19 .test1{20 margin-top: 100px;21 }22 .test1, .test2, .test3, .test4, .test5{23 width: 200px;24 height: 300px;25 border: 1px solid black;26 position: relative;27 left: 500px;28 background-color: gray;29 }30</style>31</head>32<body>33<div id="test"></div>34<div class="test1">1</div>35<div class="test2">2</div>36<div class="test3">3</div>37<div class="test4">4</div>38<div class="test5">5</div>3940</body>41</html>View Code#test部分始终固定在上⽅，不发⽣移动。
CSS元素定位的使用方法CSS元素定位的使用方法导语：定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
以下是店铺为大家搜集的CSS元素定位方法，希望对你有所帮助。
1.盒模型盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。
这些盒子们都要按照可见版式模型(visual formatting model)在页面上排布。
可见的页面版式主要由三个属性控制：position 属性、display 属性和 float 属性。
其中，position 属性控制页面上元素间的位置关系，display 属性控制元素是堆叠、并排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多栏布局。
2015721181054015.png (550×385)盒子属性分三组：边框(border)。
可以设置边框的宽窄、样式和颜色。
内边距(padding)。
可以设置盒子内容区与边框的间距。
外边距(margin)。
可以设置盒子与相邻元素的间距。
可以这么理解盒子属性：外边距是边框向外推其他元素，而内边距是从边框向内推元素的内容。
CSS 为边框、内边距和外边距分别规定了简写属性。
在每个简写声明中，属性值的顺序都是上、右、下、左(顺时针旋转)。
示例：margin:5px 10px 12px 8px;注意：4 个值之间有空格，但不能是其他分隔符(比如逗号之类的)。
甚至，你都不用把 4 值全都写出来——如果哪个值没有写，那就使用对边的值。
示例：margin:12px 10px 6px;说明：缺少最后一个值(左边)，使用对边(右边)的值(10px)，即：margin:12px 10px 6px 10px。
示例：margin:12px 10px;说明：缺少最后两个值(下边和左边)，使用上边(12px)和右边(10px)，即：margin:12px 10px 12px 10px;示例：margin:12px;说明：只写一个值，那么4个边都去这个值。
CSS之定位总体介绍下：CSS有3中定位机制，普通流【各元素按照HTML文档的顺序依次显示】，浮动，绝对定位。
1.相对定位position = relative.顾名思义：相对与自己定位。
相对定位，元素设置left,top,bottom,right会相对与自己原来的位置，移动自己的位置。
不管是否移动，它所占据的空间仍然是原来的空间【一定占据了原来的空间】。
移动元素可能会覆盖其他的元素。
2.绝对定位position = absolute.定位相对于它的祖先定位。
仔细观察上图，定位是你根据它的祖先，不是它原来的位置。
祖先：包含绝对定位元素的最近一层设置position:relative；position:absolute的元素；没有就根据文档定位，完全脱离文档流，不占据一点空间【相对定位是占据空间的】，所以可以设置z-index【这个属性知道用处吧】属性。
由于相对定位和绝对定位配合使用，用处太大，写几个例子给你看看。
帮助理解的小例子：例子1：/*********************************效果图**************************************/以前是不是想在导航条某个位置显示下时间。
Now you can do it !/*****************************************************************************/ <div id="nav"><div id="date">2013-07-26</div></div>/*****************************************************************************/ <style type="text/css">#nav{width: 60%;height: 50px;border: 1px solid red;position: relative;}#nav #date{height: 20px;border: solid 1px #ccc;position: absolute;right: 3px;bottom: 3px;}</style>例子2：/*********************************效果图**************************************//*****************************************************************************/ <form><fieldset><legend>用户信息</legend><div><label for="username">Username:</label><input type="text" name="username" id="username"/></div><div><label for="password">password:</label><input type="text" name="password" id="password"/></div><div><label for="email">email:</label><input type="text" name="email" id="email"/><em>the email's format incorrect !</em></div></fieldset></form>会不会觉得使用fieldset，legend，label很奇怪，建议在没有很好的方法前，你的所有的表单模仿上面的代码。
css中position的用法CSS中的position属性是用来控制元素在网页中的位置。
它可以让我们更加灵活地布局和设计页面。
本文将为大家详细介绍CSS中position属性的用法。
第一步：介绍position的类型CSS中的position属性有4种类型：1. static：默认值。
元素在文档流中，不受top、bottom、left、right属性的影响。
2. relative：元素在文档流中，但可以通过top、bottom、left、right属性进行偏移。
3. absolute：元素脱离文档流，相对于最近的具有定位属性的父元素进行偏移。
4. fixed：元素脱离文档流，相对于浏览器窗口进行偏移。
第二步：介绍各种position的使用方法1. static因为static是默认值，所以使用时无需设置position属性，元素会按照默认规则在文档流中显示。
2. relative使用relative可以使元素从原来的位置进行偏移。
例如，设置top：20px可以使元素在当前位置向下偏移20px。
左右偏移同理，分别使用left和right属性。
这样偏移后，元素仍然在文档流中，不会对其他元素位置造成影响。
3. absolute使用absolute将使元素脱离文档流，不再占用原来的位置，相对于最近的具有定位属性的父元素进行定位，如果没有，则相对于文档进行定位。
可以使用top、bottom、left、right属性对元素进行定位。
例如，设置top: 50px，left: 100px，将使元素相对于父元素向下偏移50px，向右偏移100px。
如果想要元素生成一个新的定位上下文，可以给它的父元素设置position为relative或者其他的定位属性。
4. fixed使用fixed将使元素脱离文档流，相对于浏览器窗口进行定位。
可以使用top、bottom、left、right属性对元素进行定位。
例如，设置top: 50px，left: 100px，将使元素在浏览器窗口中向下偏移50px，向右偏移100px。
CSS学习总结3：CSS定位CSS 定位机制CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
⼀、普通流 除⾮专门指定，否则所有框都在普通流中定位。
普通流中元素框的位置由元素在(X)HTML中的位置决定。
块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。
⾏内元素在⼀⾏中⽔平布置。
⼆、定位在讲解定位之前先说明相对定位和绝对定位到底是“以何为依据进⾏定位”：相对定位是“相对于”元素在⽂档中的初始位置；⽽绝对定位是“相对于”最近的已定位祖先元素(关于祖元素的概念在下⾯有实例说明)，如果不存在祖先元素，那么“相对于”最初的包含块。
如果想学会相对定位和绝对定位，那么必须了解这两点的区别。
2.1、相对定位设置为相对定位的元素框会偏移某个距离。
元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
注意，在使⽤相对定位时，⽆论是否进⾏移动，元素仍然占据原来的空间。
因此，移动元素会导致它覆盖其它框。
#box_relative {/*图中的框 2*/position: relative;left: 30px;top: 20px;}相对定位的⼯作原理图如下：2.2、绝对定位绝对定位使元素的位置与⽂档流⽆关，因此不占据空间。
这⼀点与相对定位不同，相对定位实际上被看作普通流定位模型的⼀部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在⼀样：#box_relative {/*图中的框 2*/position: absolute;left: 30px;top: 20px;}绝对定位的原理图：这⾥⽤实例说明⼀下祖元素的概念<div><p><span></span></p></div>/* div 相对于span来讲，就是祖辈（爷爷） *//* span相对于p来讲，就是⼉⼦ *//* p相对于span来讲，就是爸爸*//* ~.~ */2.3、浮动CSS浮动部分请参考下⼀篇博客：附录：CSS position 属性总结：所有主流浏览器都⽀持 position 属性。
