相对定位:position:relative;

  不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可通过z-index进行层次分级。

绝对定位:position:absolute;

  脱离文档流,通过top,bottom,left,right定位,选取其最近的父级元素进行定位,当父级元素position为static时,absolute元素将以body坐标原点进行定位,可通过x-index层次分级。

固定定位:position:fixed;

  这里他所固定的对象是可视窗口而并非body,或父级元素,可通过z-index进行层次分级。

CSS定位:相对定位、绝对定位和固定定位(relative absolute fixed)的更多相关文章

  1. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  2. WEB学习 -相对定位、绝对定位、固定定位、z-index

    相对定位 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. .不脱标,老家留坑,形影分离 也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘. 3.相对定位用 ...

  3. css的定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  4. CSS之定位,relative/absolute/fixed的用法

    其实position的值有四个,static/relative/absolute/fixed,而static是默认值,不算具有有定位属性,这里就不讲了. 定位其实就是跟元素设置定位属性,然后设置其对位 ...

  5. css 浮动 相对定位 绝对定位区别

    今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...

  6. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  7. css属性position: static|relative|absolute|fixed|sticky简单解析

    目录 static 静态定位(默认) relative 相对定位 正常文档流 加了relative之后的布局 加上margin/padding/border之后的布局 absolute 绝对定位 正常 ...

  8. What is the difference between position: static,relative,absolute,fixed

    What is the difference between static,relative, absolute,fixed we can refer to this link: expand

  9. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

随机推荐

  1. asp.net学习

    http://www.cnblogs.com/fish-li/archive/2011/12/27/2304063.html

  2. 000webhost找不到文件自定义错误

    1.新建一个名为.htaccess的文本文件:2.在文件中输入如下代码:ErrorDocument 404 /404.php3.保存文件,将.htaccess上传到域名的根目录,再验证,呵呵,成功了! ...

  3. bzoj 3110: [Zjoi2013]K大数查询 树状数组套线段树

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 1384  Solved: 629[Submit][Stat ...

  4. HDU 3507 Print Article 斜率优化

    Print Article Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)To ...

  5. Google将向IETF标准提交QUIC协议提案

    Google近期宣布,他们将向IETF提交实验性传输层网络协议QUIC的提案.此外,Google已经给出了QUIC协议优化页面加载时间的第一手数据. 自从2013年引入QUIC以来,Google一直在 ...

  6. appFramework在三星某些机型上的兼容问题

    有个问题困扰了安卓哥好几天 一个带有fixed抬头的列表页,在向上swipe的时候,有一定概率会把整个画面滚动上去,就连fixed的部分也移动了. 于是哥觉得是webview的问题,找了各种选项,禁用 ...

  7. Android的系统架构

    转自Android的系统架构 从上图中可以看出,Android系统架构为四层结构,从上层到下层分别是应用程序层.应用程序框架层.系统运行库层以及Linux内核层,分别介绍如下:     1)应用程序层 ...

  8. Delphi中禁止WebBrowser右键的方法

    uses MSHtml; //在控件标签additional中找到TApplicationEvents控件,拖到窗体上.在TApplicationEvents的OnMessage事件中加入以下代码: ...

  9. C++ Prime:预处理器

    C++程序会用到的一项预处理功能是头文件保护符,头文件保护符依赖于预处理变量.预处理变量有两种状态:已定义和未定义,#define指令把一个名字设定为预处理变量,另外两个指令则分别检查某个指定的预处理 ...

  10. 凯撒密码 CH Round #57 - Story of the OI Class

    题目:http://ch.ezoj.tk/contest/CH%20Round%20%2357%20-%20Story%20of%20the%20OI%20Class/凯撒密码 题解:刚开始想map, ...