前端技术分享：Css定位

css众多属性中，定位position属性，必须有姓名，而且占据了比较重要的地位，比如：二级，三级导航效果，鼠标悬停的一些动态效果，悬停栏，侧边导航栏定位效果等等都是需要定位实现的。

但是很多小伙伴，刚接触定位的时候，理解上会有一些困惑，使用上容易出bug，那我们今天就来聊一下定位position属性；

1、定位的历史

W3C（万维网联盟）组织于1998年5月发布了CSS2版本，CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性（和伪元素），以及现有属性的很多附加值，其中就包括 定位属性。

2、浏览器的支持

所有主流浏览器都支持 position 属性。

3、position属性的语法

position 属性：规定元素的定位类型

属性值：

static：默认值。没有定位，元素出现在正常的流中。

relative：生成相对定位的元素，相对于其正常位置进行定位。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

sticky （css3中新增的属性值）: 粘性定位，该定位基于用户滚动的位置。

4、定位需要配合使用的属性

left 属性:规定元素的左边缘偏移的大小。

right 属性规定元素的右边缘偏移的大小。

top 属性规定元素的顶部边缘偏移的大小。

bottom 属性规定元素的底部边缘偏移的大小。

以上属性用于给元素定位设置坐标点的位置；

属性值：

auto：默认值。通过浏览器计算左边缘的位置。

%：设置以包含元素的百分比计的左边位置。可使用负值。

length：使用 px、cm 等单位设置元素的左边位置。可使用负值。

5、了解编程中的坐标

编程中的坐标，x轴-水平轴右为正，左为负，Y轴-垂直轴下为正，上为负

每个元素都自带一个坐标系，元素左上角的位置为原点（0）位置，如下图所示

6、分别介绍定位属性每个属性值的使用语法

position:static 静态定位

position属性的默认值，即没有定位，遵循正常的文档流对象。

遵循正常的文档流对象，可以理解为，元素的位置根据在html中的书写顺序依次排序显示，没有特殊的位置改变

position:relative 相对定位

生成相对定位的元素，相对于其正常位置进行定位。

基本使用讲解：

例如：一个img元素在没有设置定位时，正常显示在浏览器中，自带坐标系，

如图显示；

给img元素设置相对定位，设置定位的坐标为（100px,100px），美女的位置会从原本原点的位置移动到（100px,100px）的位置，会发生如下变化：

代码实现如下：

 html： <img src="timg.jpg" alt="" />
 css ： img {
   // img元素进行相对定位
   position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
   left: 100px;
   top: 100px;
 }

相对定位对元素在文档流中的影响

元素仍然保持其未定位前的形状，它原本在文本流中所占的空间仍保留

例如：在img标签下面书写一个span标签，img在定位之后，原本的位置空间依旧是保留在文本流中的，写在img下面的span是没有上去的；

代码实现如下：

<img src="timg.jpg" alt="" />
<span>~~~~~~~我是写在img下面的文本亚~~~~~~~~</span>
 css ： img {
   // img元素进行相对定位
    position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
    left: 100px;
    top: 100px;
 }
  span {
    background: lemonchiffon
 }

效果如下：

position: absolute 绝对定位

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

解释：指绝对定位元素会根据有定位设置（除static定位）的父元素作为参照进行定位；如果父元素没有定位设置，那就继续向上找祖父元素，看是否有定位设置，有的话就根据祖父元素定位，没有的话，那就继续向上找…….如果都没有，就根据html进行定位。

包含块：绝对定位元素参照的有定位设置的父元素我们称为包含块，包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物；

设置某个元素为包含块：给此元素添加relative，fixed，absolute都可，推荐使用relative，因为不会影响元素在文本流中的显示；

总结元素绝对定位三部曲：

先确定其包含块
设置元素绝对定位
定位的位置

基本使用讲解：

例如：img元素放在div中，没有设置定位效果

代码实现如下：

HTML:

<!DOCTYPE html>
<html lang="en">
   <head> </head>
   <body>
      <div>
        <img src="../img/timg.jpg" alt="" />
      </div>
   </body>
</html>

CSS：

div {
   width: 400px;
   height: 400px;
   border: 10px dashed coral;
   margin: 100px;
}

显示效果如下：

然后给图片设置绝对定位，代码如下：

img {
    position: absolute;
    left: 0;
    top: 0;
}

分析：img的父元素是div，从上述代码中，可以看出div没有定位设置，不能作为img的包含块，一依次向上是body，body也没有定位设置，再向上就是html，所以img会根据html进行定位，定位到离包含块左边0，上边0的位置定位，也就是左上角位置；

效果如下：

如果想让img根据div盒子进行定位，div需要有除static之外的定位设置；成为一个包含块，代码如下：

  div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: absolute;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }

效果如下：

绝对定位对元素在文档流中的影响

给元素设置绝对定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；

例如：在img下面添加了一个p标签，并且没有给img设置绝对定位，此时img和p会根据书写顺序，从上向下依次显示，代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
        ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
 }
p {
    background: lemonchiffon;
 }

效果如下：

当给img设置绝对定位之后，img在正常文档流中所占的空间会关闭，img不在占据原来的空间；p标签就会当img不存在一样，显示在div最开始的位置：

代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
         ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
 div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: relative;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }
 p {
    background: lemonchiffon;
 }

效果如下：

固定定位 position:fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

基本使用讲解

元素设置固定定位之后，相对窗口进行定位，不会根据浏览器滚动条的滚动而移动位置，代码如下：

结构：内容比较多,让浏览器可以出现滚动条

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
</body>

效果如下：

给图片添加固定定位；代码如下：

<style>
    img {
    position: fixed;
    right: 0;
    top: 30%;
    }
</style>

效果如下：

固定定位对元素在文档流中的影响

给元素设置固定定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样（参照上图看效果）；

sticky 粘性定位

css3中新增的属性值，有兼容问题，ie低版本浏览器不支持

粘性定位，元素在浏览器范围内定位时就像 position:relative; 而当页面滚动超出目标区域时，它的定位效果就像 position:fixed;，它会固定在目标位置。

基本语法讲解

例如：给img元素设置粘性定位，代码如下：

Html结构：

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本8
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本9
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本10
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本11
	<br /><br /><br /><br /><br />
</body>

css代码：

<style>
   img {
       position: sticky;
       left: 300px;
       top: 100px;
 }
 </style>

效果如下：

元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

例如： span默认为行内元素，给其设置绝对定位，观察其生成的块级框效果，代码如下：

Html：

<span>我是测试绝对定位对元素类型影响的小可爱</span>

Css：

<style>
 span {
     position: absolute;
     width: 300px;
     height: 300px;
     background: lightblue;
     font-size: 30px;
     border: lightcoral 10px dashed;
 }
 </style>

效果如下：

以上是对position属性语法的基本讲解，其实position在实际开发中，有很多灵活的使用方式，下次我们写一个比较有趣的案例，给大家展示定位在实际项目中的灵活应用。

者：帅昆

想必大家手里都有一堆照片，数码的、胶片的……

大部分时间……这些照片都沉睡在抽屉里、硬盘里……其实常常翻的可能就是手机的相册。

但是如果把这些照片导入手机相册，只能看到模糊的一团，可能没有时间、地点，串不起回忆

辛辛苦苦寻寻觅觅，终于找到了成套的解决方案……给这些老照片注入时间、地点，导入手机后看着时间线和地图上自己走过的一个个标记，它们有了生命，拼起了承载的记忆碎片……话不多说，跟着我一步步做吧

先展示下本文用作示例的照片……30多年前英俊潇洒的我

照片是扫描的，信息少如渣

一、下载安装软件：geosetter

http://www.appinn.com/geosetter/

二、打开“百度地图-坐标拾取系统”

http://api.map.baidu.com/lbsapi/getpoint/index.html

三、开始操作（一）通过软件打开需要编辑信息的照片

（二）先添加时间

这个照片是我百天几年，日子很好算进入照片编辑——注意，多张照片可以同时选中后右键一同编辑。

输入你确定的日期……年纪大了，翻都翻半天还是直接输入吧。如果不是很确定，就大概估计一个好了。

填好点击确定。

（三）添加GPS信息。还是右键进入编辑模式，选择“地点选项卡”。

（四）打开“百度地图-坐标拾取系统”，找到你需要的地点。

（五）粘贴GPS信息

注意，百度出来的顺序跟软件是反的，注意粘贴顺序……除非你想免费“出国”

编辑好后，一定要记得点击“保存改变”！！！！！！！！

然后右键选择在地图中显示，就可以看到照片在地图中显示了……如果你的地图是一片空白……请自己想办法替换hosts

有偏差……那必须的啊，这也是为了在相机里面尽可能显示的准确，我们在前面用百度地图抓坐标的原因……

四、拷贝入手机

（一）安卓手机

建议使用“namexif"把照片名称自动修正为跟手机拍摄的照片命名方式一致，这样拷贝进去以后连接电脑编辑的时候也容易找到。这个软件很厉害，可以批量根据照片信息自动命名哦

（二）苹果手机我用的是”iTools“导入。具体使用方法软件说的很详细，这里不废话了。

五、效果验证……

箭头起于原始，终于编辑后。

这要是打开……那非炫倒一大片

与设定位置均存在一定的偏差……差不多就行了呗

实际操作发现，不管是用谷歌地图、百度地图、搜狗地图确定的经纬度编辑进照片再导入手机，在手机相册内显示均与预定地点存在偏差啊……具体这个怎么修正看看有没有高人给出解决方案，我是尝试了多次，这里提供一个参考开拓思路：http://blog.sina.com.cn/s/blog_80a9926b0101ktoa.html

最后，再推荐一个App……因为苹果相册，地点显示只能按照年度显示，不能一下全部显示你去过的地方。这个App可以解决。（安卓机好像不存在这个问题，至少我手里的mate7可以显示所有有GPS信息的照片在地图上的标注）

要注意的是，最好每个地点选几张照片出来放到单独的相册，再用app只读取这个相册内的照片。因为如果你手机照片太多，直接读取手机相册app可能会黑屏重启……就这个问题也咨询了官方，官方也给出了具体的意见。

好了，介绍完了，希望对大家有所帮助。

~谢谢观赏~

天学会html+css，第九天固定定位。

Redmi手机电视笔记本。

今天的学习目标是右侧悬浮工具栏用固定定位实现，它是相对于浏览器窗口的定位方式。

·盒子里的内容用a标签，一个图片加一行文字，此时它的位置在最底部。

·然后给它写上固定定位样式，右侧距离0，下面距离70像素，加上背景颜色，看下效果。

·开始给a标签写样式，固定宽高，text-renderin默认下划线去掉，里面内容居中，看下效果。

·图片写样式之前也要加上这行代码，然后让它的尺寸变小一点，并且左右居中，看下效果。

·文字的颜色、大小也调整一下。

·最后给a标签加上边框、内边距，让里面内容往下挪一挪。

到此，今天的学习完成。

在线咨询

上一篇：3种方法（div法、css法、js法）制作html的旋转太极图
下一篇：JSP中四种传递参数的方法（个人总结，简单实用）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端技术分享：Css定位

1、定位的历史

2、浏览器的支持

3、position属性的语法

4、定位需要配合使用的属性

5、了解编程中的坐标

6、 分别介绍定位属性每个属性值的使用语法

相对定位对元素在文档流中的影响

基本使用讲解：

绝对定位对元素在文档流中的影响

基本使用讲解

固定定位对元素在文档流中的影响

基本语法讲解

元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

您的项目需求

6、分别介绍定位属性每个属性值的使用语法