在网页的编译中，定位是个非常灵活并且非常好用的一个功能，在css中，它为定位和浮动提供了一些属性，利用这些属性，我们可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素相对于其正常位置应该出现的位置，或相对于父元素，另一个元素甚至浏览器窗口本身的位置。
在这里我们要引入一个标签：position
说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。
position语法：
position : static absolute relative
position参数：
static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed：将对象固定在屏幕的固定位置。
非常重要的一点：绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位。
CSS的相对定位 position: relative;
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 30px，那么框将在原位置顶部下面 30 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
这是未设置定位的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.mr-content{
width: 1200px;
height: 60px;
background-color: aqua;
}
.mr-content div{
margin: 0 20px 0 30px;
width: 300px;
height: 50px;
border:1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="mr-content">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
效果如下：
这是设置定位的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.mr-content{
width: 1200px;
height: 60px;
background-color: aqua;
}
.mr-content div{
margin: 0 20px 0 30px;
width: 300px;
height: 50px;
border:1px solid red;
float: left;
}
.one{
position: relative;
top:30px;
left: 20px;
}
</style>
</head>
<body>
<div class="mr-content">
<div></div>
<div></div>
<div class="one"></div>
</div>
</body>
</html>
效果如下：
注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
我们现在将第二个框进行定位，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.mr-content{
width: 1200px;
height: 60px;
background-color: aqua;
}
.mr-content div{
margin: 0 20px 0 30px;
width: 300px;
height: 50px;
border:1px solid red;
float: left;
}
.one{
position: relative;
top:30px;
left: 70px;
}
</style>
</head>
<body>
<div class="mr-content">
<div></div>
<div class="one"></div>
<div></div>
</div>
</body>
</html>
效果如下：
CSS的绝对定位 position:absolute;
如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。
我们做个例子来看一下，我们这里写两个div，内部都有2个span元素，span元素我们都使用绝对定位，并设置left和top为50px，第一个div我们设置相对定位，第二div不设置定位。
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.div1{
margin-top: 100px;
width: 200px;
height: 100px;
position: relative;
border: 1px solid red;
}
.div2{
width: 200px;
height: 100px;
border: 1px solid red;
}
div span{
position: absolute;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="div1">
<span>我是第一个</span>
</div>
<div class="div2">
<span>我是第二个</span>
</div>
</body>
</html>
我们可以看一下效果：
我们再来看看span标签的内容是怎么显示的：
这是第一个div里面的内容，因为进行了相对定位，所以我们可以看见，它还是在第一个div中，进行上50左50的定位。
这是第二个div中的内容，因为没有进行相对定位，所以div2内部的span使用绝对定位是相对于浏览器body元素来定位元素位置。
CSS的固定定位 position:fixed;
如果想为元素设置层模型中的固定定位，需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。比如我们准备一长串的文字，让文字超出一屏的宽度，设置浮动元素div1的left和top为100px，拖动浏览器的滚动条，浮动元素div1的位置不会发生变化。
例子代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style>
.div1{
width: 100px;
height: 100px;
border: 1px solid red;
position: fixed;
left: 200px;
top: 200px;
color: red;
}
p{
line-height: 200px;
}
</style>
</head>
<body>
<div class="div1">我是第一</div>
<p>青砖白瓦，斑驳的古墙，古老的庭院，朱漆大门，一条条弯弯曲曲的巷子，包罗了世间万象，百态人生，穿过了漫漫的岁月长河……
巷子，应该属于江南吧！
古色古香的房屋，古朴素雅的建筑，斑驳的古墙布满了墨绿色的青苔，卷起的屋檐上，爬满了丝丝缕缕的青藤，微风疏雨飘过，吹散遍地落花，那淡淡的幽香弥漫在烟雨朦胧的古巷子，延伸到路的尽头……
杏花，春雨，小桥流水，勾勒出我的江南梦。漫步行走在古朴的江南小城，走进一条悠长的巷子，双脚踩踏在青石板上，发出咔咔的声响，震颤出清脆的回音。
巷子，是历史和古老文化的凝聚地，它融合了尘世百态，风情万千。试想，长长的巷子口，穿梭着南来北往的过客，或擦肩而过的惊喜，或并肩前行的温情，或不经意的回眸莞尔一笑，都处处蕴藏着诗意的美好吧！
如此，用一个字形容，妙，妙得恰到好处呢！
</p>
</body>
</html>
效果：
它就始终固定在屏幕的固定位置。
好了，结束啦！！！
网友评论