整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
用CSS有普通流、绝对定位和浮动三种基本的定位机制，如果不是专门指定区块的位置都是在普通流中定位，即从上到下一个接一个地排列，位置
由元素在HTML中的位置决定。
文档中默认都是静态定位
使用相对定位的盒子的位置常以标准流的排版方式为基础, 然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位的盒子仍在标准流中, 它后面的盒子仍以标准流方式对待它。
使用relative, 即相对定位, 除了将position属性设置为relative之外, 还需要指定一定的偏移量，
水平方向通过left或者right属性来指定, 垂直方向通过top和bottom来指定。
使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。而该相对定位的盒子则仍然位于标准流中，它对父块没有任何影响。
使用相对定位的盒子不仅对父块没有任何影响，对兄弟盒子也没有任何影响。
简单理解：
它是相对于"原来的自己"进行定位, 相对定位元素它还占用空间, 它的层次会比普通元素要高
相对定位属性它一般都是用于配合绝对定位来使用
相对定位有坑, 所以一般不用于做"压盖"效果。页面中, 效果极小。就两个作用：
1) 微调元素
2) 做绝对定位的参考，子绝父相(配合绝对定位一起使用)
相关属性
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
用绝对定位的盒子以它的"最近"的一个"已经定位"的"祖先元素"为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
再有，绝对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有任何影响，其他的盒子就好像这个盒子不存在一样。
简单理解:
绝对定位元素它是相对于"祖先"定位元素(relative、fixed、absolute)，如果绝对定位元素它的祖先没有定位元素(static)那么它会以当前的浏览器窗口来进行定位,
绝对定位元素不再占用空间
当position的属性值为fixed，即固定定位。它与绝对定位有些类似,区别主要在于定位的基准不是祖先，而是浏览器窗口或其它显示设备窗口。
也就是当访问者拖动浏览器的窗口滚动条时，固定定位的元素相对于浏览器窗口的位置保持不变。(IE6不支持固定定位)
简单理解：它是以浏览器窗口作为参照标准来进行定位, 固定定位元素它不再占用空间
定位问题：
绝对定位问题：
当我们给一个子元素设置绝对定位,让它在父元素的右下角显示，这个时候
如果父元素的宽和高都为奇数,那么在IE6下我们没有方法让这个子元素压住边框的
这个时候我们建议大家不要使用奇数作为长度
相对定位问题；
IE6下,它认为我们的父元素一定包住它里面的子元素,所以当子元素的宽度和高度大于父元素时,在IE下父元素就会被撑开,
这个时候我们想解决这个问题,我们可以给父元素设置overflow:hidden,但是此时IE6还是不起作用,
所以我们解决方法就是给子元素和父元素都设置相对定位
固定定位的问题：
当我们给一个固定定位的子元素(子元素position:fixed)的父元素添加相对定位或者绝对定位的时候,
它是不会跟着父元素移动的,仍然是相对屏幕的。
实例:导航条
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>导航条</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul,li{
list-style:none;
}
.box{
width:800px;
height:30px;
margin:100px auto;
}
li{
float:left;
width:180px;
text-align: center;
line-height:28px;
border:1px solid red;
margin-left:-1px;
}
li:hover{
border:1px solid green;
position:relative; /* 解决边框被压住问题 解释:后面的li压住前面一个li,使用相对定位后,提高了li显示高度 */
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>HTML+CSS</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ul>
</div>
</body>
</html>让层水平居中的方法：
让左右边界自动判断之下，即可达成左右位置呈现居中的目的。
#content {
width: 980px;
margin-right: auto;
margin-left: auto;
position: relative;
}
<div id="content">层内容</div>若内容区<div>之内还有其他内容<div>,其CSS属性设置就需要加上"定位"position:absolute(或relative),以防firefox等其他浏览器出现错误
<div id="container">
<div id="content">
</div>
</div>
#container {
background-image: url(images/3-2-1-bg.jpg);
height: 400px;
width: 800px;
position: relative;
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
}
#content {
margin: 75px;
height: 210px;
width: 610px;
padding: 20px;
border: 1px solid #FFF;
position: absolute;
}让层垂直居中的方法：
示：点击上方"蓝色字体"↑ 可以订阅噢！
摘要 51RGB官方微信position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。
postion属性我们成为定位，它有4个不同类型的定位，这些类型会影响元素的生成方式，下面我们详细说明position属性。
（1）static
static是position属性的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示
（2）relative
relative翻译成中文称相对定位，设置了这个属性后，元素会根据top，left，bottom，right进行偏移，关键点是它原本的空间仍然保留。我们看下面例子：
HTML代码
1 2 3 | <div class="relative"> </div> <div></div> |
CSS代码
CSS
1 2 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果图
relative效果
在这个例子中，div.relative相对定位，并且left设置为20px，left设置为50px，其相对于父元素进行偏移，并且原本的空间也占据着，下面的元素并不会顶替上去。
（3）absolute
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：
HTML代码
1 2 3 | <span class="absolute"> </span> <div></div> |
1 2 | div { background: #0094ff; width: 250px; height: 100px; } .absolute { background: #ff6a00; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果图
absolute效果
如图所示，span标签被设置成绝对定位，就可以设置height和width属性，而且不占有原本的空间，后面的div元素会顶替上去。
（4）fixedfixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移
在详解CSS float属性中我们提到包含块这个概念。对于position属性也有包含块这个属性，它要分几种情况来讨论：
1.根元素的包含块，根元素一般是html元素，有些浏览器会使用body作为根元素，大多数浏览器，初始包含块是一个视窗大小的矩形
2.非根元素的包含块，如果该元素的position是relative或static，它的包含块是最近的块级框，表的单元格或行内块的内容边界
我们举例进行说明，
HTML代码
1 2 3 4 5 6 | <div> 我是父级元素的内容 <div class="relative"> 相对定位元素 </div> </div> |
包含块
这是相对定位元素的包含块，为最近的块级框，表的单元格或行内块的内容边界，相对定位元素相对于其包含块进行偏移，我们可以简单理解为相对于其原来的位置进行偏移。
3.非根元素的包含块，如果该元素的position是absolute，则包含块为最近的position不是static的祖先元素。简单来说，它的包含块会从父级元素一直向上查找，找到第一个position不是static的元素为止。
前面的例子中已经涉及到偏移属性，它指的是元素相对于其包含块的偏移，我们称其为偏移属性，分别是top，bottom，left，right，依次代表上下左右。他们的值可以是具体的数值，也可以是百分比。如果是百分比，top和bottom是相对于包含块高度的百分比，left和right是相对于宽度的百分比。它们也可以设置负值，即有可能将元素移动到包含块的外边。
接下来我们了解一下绝对定位的详细细节。
一个元素被设置为绝对定位时，会脱离文档流，然后相对其包含块进行偏移。
一般来说，我们会将一个元素设置为relative来作为absolute元素的包含块，我们看看下面的例子：
HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="absolute"> 相对于初始包含块定位 </div> <br /> <br /> <br /> <br /> <br /> <br /> <div class="relative"> <div class="absolute"> 相对于最近relative祖先元素定位 </div> </div> |
1 2 3 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 200px; height: 100px; top: 20px; left: 50px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } |
效果图
基本的绝对定位
如图所示，有两个绝对定位元素，第一个元素没有position不是static的祖先元素，所以它的包含块是body，根据body进行偏移，第二个绝对定位元素设置了一个relative的父元素，它根据父元素进行偏移。
元素设置成绝对定位后会脱离文档流，并且失去占用的空间，而且如果偏移的位置接近，会造成重叠问题。看看下面的例子：HTML代码
1 2 3 4 5 6 7 8 | <div class="relative"> <div class="absolute"> 相对于最近relative祖先元素定位1 </div> <div class="absolute light"> 相对于最近relative祖先元素定位2 </div> </div> |
1 2 3 4 | div { background: #0094ff; width: 250px; height: 100px; } .relative { background: #ff6a00; position: relative; width: 500px; height: 300px; top: 20px; left: 50px; } .absolute { background: #988c8c; position: absolute; width: 200px; height: 100px; top: 20px; left: 50px; } .light { background: #f3d6d6; top: 70px; left: 80px; } |
效果图
绝对定位的重叠问题
我们可以看到，第二个绝对定位元素盖住了第一个元素，那怎么让第一个元素盖住第二个元素呢，这就要用到z-index属性，这个属性表示元素的叠加顺序，默认情况下，z-index为0，数值越高的元素层级越高，就可以盖住低于其层级的元素，我们设置第一个原色的z-index为10，结果如下
绝对定位的重叠问题
如果两个元素的层级相同，则越后面的元素会覆盖前面的元素，默认情况下，第二个元素就会盖住第一个元素。
fixed定位很简单，类似与absoulte，但是它的包含块就是浏览器窗口，相对来说简单很多。常见的应用比如固定导航，回到顶部。在这里不再赘述，大家可以查找相关资料。
relative定位的元素进行偏移后，不会脱离文档流，还有占据原本的空间。除此之外，我们还要注意一个细节：如果元素设置了margin为负值之后发生重叠的情况下，相对定位的元素会覆盖普通元素。我们看看下面的例子：HTML代码
1 2 3 4 5 6 | <div class="no-relative"> 未相对定位的元素 </div> <div class="minus-margin"> 负margin元素 </div> |
1 2 3 4 | div { background: #0094ff; width: 250px; height: 100px; } .no-relative { background: #ff6a00; width: 200px; height: 100px; } .relative { background: #ff6a00; width: 200px; height: 100px; position: relative; } .minus-margin { margin-top: -30px; } |
效果图
未相对定位时没有覆盖
默认情况下，两个元素都是正常的元素，设置了负的margin属性后，后面的元素会覆盖前面的元素，我们修改第一个元素的class为relative，可以看到效果如下：
相对定位时覆盖
添加了相对定位后，第一个元素就会覆盖其他正常的元素了。
relative属性最经常的一个应用应该是作为absolute元素的包含块了，为了限制absolute元素的偏移位置，常常设置其父元素为relative来作为其包含块。
position的应用非常频繁，下面我来说说常见的一些场景：
在电商网站中，我们常常可以看到产品的左上角或右上角有一些比如“新品”，“促销”，“热卖”等标签，比如下图：
产品标签
这个是怎么实现的呢，我们来模拟一下：HTML代码：
1 2 3 4 5 6 | <div class="product"> 我是产品 <span class="hot"> 热卖 </span> </div> |
CSS代码：
CSS
1 2 | .product { width: 150px; height: 150px; background: #0094ff; position: relative; } .hot { position: absolute; right: 10px; top: 10px; width: 40px; height: 20px; background: #ff6a00; text-align: center; } |
效果如下：
产品标签
如图所示，右上角有一个标签。原理很简单，就是设置父元素相对定位，标签元素绝对定位，然后相对于父元素偏移到右上角。
自动完成框是一个非常常见的应用，其生成的下拉菜单也是用到了position属性。我们先看看下面的效果：
、
自动完成输入框
这是一个很简单常见的下来自动完成框，我们来看看它的HTML和CSS代码：HTML代码
1 2 3 4 5 6 7 | <input class="search-box" type="text" placeholder="请输入关键字" value="position" /> <ul style="left:58px;"> <li>position属性</li> <li>position应用</li> <li>position是什么</li> <li>position翻译</li> </ul> |
1 2 3 4 | .search-box { border: 1px solid #ccc; width: 200px; padding: 5px; height: 24px; margin-left: 50px; } ul, li { list-style-type: none; } ul { border: 1px solid #ccc; width: 210px; position: absolute; } li { padding: 5px; } |
这个原理也很简单，通过设置下拉菜单为绝对定位，然后设置其left属性与输入框对齐。
当然position的应用还有很多，比如布局，比如fixed可以用来做固定导航菜单，网页右下角的固定菜单等，有兴趣的同学可以自行查找相关资料进行学习。
position属性是一个容易让初学者迷惑的属性，尤其是absolute和relative的应用。要用好它们，首先要从absolute和relative的基本特性开始了解，理解了他们的特性之后应用起来就得心应手了，了解基本原理后，多多写几个例子从实践中去体会它们的特性，慢慢的就会熟悉了。
想认识志同道合的朋友一起学习web
加入我们的学习QQ群 19066743
丰富的学习资源，周一到周四免费直播公开课
长按图片，识别二维码即可入群
你可能感兴趣的精彩内容
微信：UI设计自学平台加关注
长按关注：《UI设计自学平台》
SS所提供的Position定位属性在进行网页页面布局过程中非常重要，通过使用Position定位属性可以实现对页面元素进行精确定位，最终达到较好的设计及页面展示效果。本文主要针对Position属性设计教学案例，实现教学。
CSS学习教程
Position定位属性为设计人员提供5类定位模式，分别为static静态定位、relative相对定位、absolute绝对定位、fixed固定定位及sticky磁铁定位模型。其中较常使用的是相对定位、绝对定位与固定定位三种模式。
以上给出了position属性常用的定位方式，在实际进行页面设计及元素布局过程中可以使用以上属性实现元素的精确定位。
为演示定位属性使用，本文设计制作上海世界技能大赛选手证，要求学生使用HTML进行选手证的设计及编码实现。要求：
本例设计要求如上所示，设计实现参考效果如下所示：
参赛证设计样式
参赛证设计样式描述如上图所示，基本元素来自世界技能大赛上海网站，主要logo包含上海世赛标识LOGO、选手照片与选手信息。所需素材如下：
案例所需素材
本例实现代码如下所示：
CSS样式文件
页面body部分
本例实现代码如上所示，其中CSS样式部分用于实现div布局样式，页面body部分为页面呈现内容。本例父元素使用relative属性进行定位，所有子元素均以父元素为基础使用absolute进行精确定位。
本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！如需完整案例代码请关注并私信作者。
*请认真填写需求信息，我们会在24小时内与您取得联系。
