关于position定位(所有主流浏览器都支持 position 属性),大家会联想到relative和absolute,下面我就讲一下relative和absolute分别是相对于谁进行定位的?

  在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成,有四个可选值,它们分别是:static、absolute、fixed、relative,这里向大家描述一下它的使用。

  absolute:生成绝对定位的元素,相对于最近一级的定位不是static的父元素来进行定位。

    使用position:absolute,能够很准确的将元素移动到你想要的位置,让我将nav移动到页面的右上角。我们可以这样写:

    nav{position:absolute;top:0;right:0;width:200px;}

  fixed:也是生成绝对定位的元素,通常相对于浏览器窗口或frame进行定位。需要注意的是IE6并不支持此属性。

  relative:生成相对定位的元素,相对于其在普通流中的位置进行定位。

    我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。

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

CSS中的定位:

  relative:相对定位,位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,元素仍然处于正常文档流当中,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。

  absolute:绝对定位,位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标,元素脱离正常文档流,可以通过left、top、right和bottom的CSS规则来改变元素所处的位置。

  fixed:固定定位,位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。

    position:fixed  相对于窗口的固定定位    

    所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。

    fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

  static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。

  !注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:

  <div style="position: relative;">

  <div style="position: absolute; top: 10px; left: 10px;"></div>

  </div>

  这就是我对position的理解,希望能帮到学习的你。

解析position定位的更多相关文章

  1. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  2. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  3. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  4. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  5. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  6. position定位的小问题

    css中position定位有四个属性,分别是:static.fixed.relative.absolute. 其中,static是默认值,未脱离文档流,元素的位置即按照文档结构的顺序进行定位排序: ...

  7. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  8. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  9. CSS定位:几种类型的position定位的元素

    当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来 ...

随机推荐

  1. HTTP——学习笔记(1)

    名词解释: 协议: HTTP:HyperText Transfer Protocol,超文本传输协议,属于应用层的协议 FTP:File Transfer Protocol,文件传输协议,相比于HTT ...

  2. 【转】Hook钩子C#实例

    [转]Hook钩子C#实例 转过来的文章,出处已经不知道了,但只这篇步骤比较清晰,就贴出来了. 一.写在最前 本文的内容只想以最通俗的语言说明钩子的使用方法,具体到钩子的详细介绍可以参照下面的网址: ...

  3. 我有一个idea,但是没有钱,又没技术怎么办?

    我想你还少讲一件事,就是同时如果你也没什么明确的商业计划,恭喜,那你有机会成为马云第二,因为他曾说过自己的成功要素就是「没钱」.「不懂技术」.「没有计划」,要是这么刚好让你从事互联网产业,我看不出三年 ...

  4. C++primer读书笔记11-多态

    多态也是C++中的一个重要的方面.多态和动态类型,虚函数本质上是指同样的事情. 1 虚函数 类中的成员函数原型前面加上virtual 表面这个函数是个虚函数.虚函数的目的是为了在继承它的派生类中又一次 ...

  5. nj04---事件回调函数

    一.回调函数 1.异步式读取文件 var fs=require('fs'); fs.readFile('file.txt','utf-8',function(err,data){ if(err){ c ...

  6. m_Orchestrate learning system---二十四、thinkphp里面的ajax如何使用

    m_Orchestrate learning system---二十四.thinkphp里面的ajax如何使用 一.总结 一句话总结:其实ajax非常简单:前台要做的事情就是发送ajax请求过来,后台 ...

  7. POJ 1141 括号匹配 DP

    黑书原题 区间DP,递归输出 不看Discuss毁一生 (woc还真有空串的情况啊) //By SiriusRen #include <cstdio> #include <cstri ...

  8. java9新特性-13-增强的 Stream API

    1.使用说明 Java 的 Steam API 是java标准库最好的改进之一,让开发者能够快速运算,从而能够有效的利用数据并行计算.Java 8 提供的 Steam 能够利用多核架构实现声明式的数据 ...

  9. Java基础学习(一) -- Java环境搭建、数据类型、分支循环等控制结构、简单一维数组详解

    一:java概述: 1982年,SUN公司诞生于美国斯坦福大学校园,并于1986年上市,在NASDAQ(纳斯达克:是全美证券商协会自动报价系统)的标识为SUNW,2007年改为JAVA. 2009年4 ...

  10. TF.LSTM实现

    感悟:耗时最多的就是数据格式整理,其本身并不复杂 NN-LSTM-NN-SOFTMAX 数据格式:batch_size =>批大小,n_steps=>要建立多少lstm 0.原始输入数据格 ...