css position之初识

我们先看看position定位有那几个属性，下面是我从w3c的截图，为我们认识定位做初步的了解

通过上面这张图嘞，我们知道了position有5个属性，那么下面，我就来具体的说下每个属性的使用。

absolute

absolute是在我们需要脱离文档流定位时使用的，话不多说，上代码先

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
　　#a{position: relative;width: 200px;height: 200px;background: #4096ee;margin: auto;}
　　#b{position: absolute;background: #cda;width: 50px;height: 50px;}
</style>
<body>
　　<div id="a">
　　　　<div id="b"></div>
　　</div>
</body>
</html>

效果如下：

比如我们刚刚看到的#b的那个div，我们可以通过设置它的top(bottom),left(right)值，使它在#a的任何位置，不管#a怎么的移动，当然，有一个前提，只要父级元素设了position并且不是static（默认既是static），那么上述才成立。

一般而言，我们会用absolute绝对定位做什么呢？顾名思意，定死在某个位置上。对，你没有看错，就是定死在某个位置上。绝对定位是脱离文档流的，也就是说，它不占文档的空间。与float不同，虽然他们都是浮动的，但是float还是在文档内的，并没有脱离。

fixed

fixed也是脱离文档流的，它与absolute最大的区别在于定位的对象不同，absolute一般是对父元素定位，而fixed是对窗口定位。

我们在很多网站都可以看到，比如在线客服之类的，不管我们的滚动条是往上滚动还是往下，在线客服的那一块都是在窗口的那个位置，不会变动。

看到没有，我的滚动条下来了，但是设置了css属性为fixed的div并没有改变在窗口的位置。

relative

relative是相对自己原来的位置定位，要是我们不给他设置位移的属性(例如top,left，margin等)，那么设置了和没设置是在同一个位置。这里我就不赘述了。

以上就是我对定位的一些理解，希望对刚学前端的同学有帮助，也欢迎各路豪杰对我理解错误的地方给予一定的评论。

css之postion定位的更多相关文章

  1. css的postion属性

    在实际项目中,发现postion这个属性经常使用而且常常很重要,所以总结整理一下知识点 css中postion属性有以下可选值,分别是:static,absolute, fixed, relative ...

  2. 关于CSS的粘性定位sticky失效问题

    CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;&q ...

  3. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  4. （转）CSS+DIV float 定位

    来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...

  5. CSS入门教程——定位(positon)

    CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...

  6. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  8. 简明CSS属性：定位

    简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页 ...

  9. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

随机推荐

  1. SEARCH(文字の検索)

    文字列に関する無効命令 以下の各命令は無効であり.4.6 および 6.10 までのリリースとの互換性を確保するためにのみ利用可能となっています.これらの命令が古いプログラムの中に出現することはあります ...

  2. Lucene如何实现多条件搜索？

    有两种方式可以实现, 一是:Lucene搜索API中提供了一个布尔查询器(BooleanQuery),它可以包含多个查询器,每个查询器Occur枚举控制是“and” 还是“or” BooleanQue ...

  3. python2.7入门---变量类型&案例

      这篇文章呢,主要是用来记录python中的变量类型学习内容的.接下来就来看一下变量类型,那么什么是变量呢.变量存储在内存中的值.这就意味着在创建变量时会在内存中开辟一个空间.基于变量的数据类型,解 ...

  4. Eclipse报错:An internal error occurred during: "Building workspace". Java heap space），卡死解决办法

    在项目工程的根目录下,找到.project,用记事本打开,把两处删除掉: 第一处: <buildCommand> <name>org.eclipse.wst.jsdt.core ...

  5. 「个人训练」Can you solve this equation?（HDU-2199）

    题意与分析 纯粹水题.本来想做下放松心情的,结果还是被坑了qaq 重点就是在浮点误差.比较左右的下次就直接上1e-10,别看着题目说1e-4然后给个-5,结果暴wa.气傻了..... 代码 #incl ...

  6. C++学习010-将某个地址转化为指针

    如果需要将某个具体的地址转化为指针,可以直接使用类型那个转换来是实现. 实例如下 int main() { void* pData = (void*)(0x004001); std::cout < ...

  7. cocos2d-x 键盘和鼠标事件

    出了菜单可以响应用户事件外,cocos2d中的层(Layer)也可以响应事件.层能够自动响应窗口事件,这些事件主要是键盘和鼠标事件,cocos2d中事件处理是通过Pyglet的事件处理完成的. 1.键 ...

  8. Spark性能超过Hadoop百倍

    Spark在偷换概念,Hadoop跑硬盘,Spark跑内存,地球人都知道,内存的速度可是远超硬盘一个量级,超过100倍又有什么奇怪的.如果要比,咱们都拿硬盘来跑跑看!

  9. Spark集群管理器介绍

    Spark可以运行在各种集群管理器上,并通过集群管理器访问集群中的其他机器.Spark主要有三种集群管理器,如果只是想让spark运行起来,可以采用spark自带的独立集群管理器,采用独立部署的模式: ...

  10. Nginx 配置 HTTPS自签名证书

    工具: OpenSSL ssl的开源实现,几乎实现了市面上所有的加密 libcrypto: 通用加密库, 任何软件要实现加密功能 链接调用这个库 libssl: TLS/SSL 加密库 openssl ...