整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
SS定位机制
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。
相对定位
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
只要box2设置了position为relative ，box1和box3始终不会因为box2的改变而改变。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: relative;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body></html>
2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。
<!DOCTYPE html><html lang="en">
<head><meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>
4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
详细的可以参考：http://www.w3school.com.cn/css/css_positioning_floating.asp
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
当设置box2的position为absolute时，它就会脱离文档，相当于不存在。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body></html>
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<head>
<style>
p.pos_fixed {
position: fixed;
top: 30px;
right: 5px;
}
</style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>Note:</b> 代码使人进步！！！.</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
</body>
</html>注意：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
相对定位元素的定位是相对其正常位置。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=640, user-scalable=no">
<title> 定位</title>
<head>
<style>
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body style="background-color:azure;">
<p>Some more text</p>
<p><b>Note:</b> 代码使人进步！！！.</p>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
h2.pos_top{
position:relative;
top:-50px;
}相对定位元素经常被用来作为绝对定位元素的容器块。
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2{
position:absolute;
left:100px;
top:150px;
}Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
本文基于Html基础，主要介绍了CSS中四种定位的方式。对于四种的定位表现形式，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。
最后，希望可以帮助大家更好的学习CSS3。
*请认真填写需求信息，我们会在24小时内与您取得联系。
