CSS定位
Static 默认定位
Relative 相对定位：left 和top
position: relative;/*相对定位*/
	left:40px;/*在原来的位置向右移动*/
	top:100px;/*在原来的位置向下移动*/
	他的参照点是他原来位置
Absolute 绝对定位：元素从原来的位置脱离，让出原来的空间，同时相对于他所
存在的离自己最近的非标准流的盒子而言的
position: absolute;/*绝对定位*/
	left:40px;/*在原来的位置向右移动*/
	top:100px;/*在原来的位置向下移动*/
	他的参照点是他原来位置
Fixed 只根据body的绝对定位

CSS定位小技巧的更多相关文章

  1. css样式小技巧

    1.css样式小技巧 HTML怎样设定使背景图片不随页面滚动而滚动 background-attachment:fixed; 2.实现li a 超过长度内容出现省略号… overflow:hidden ...

  2. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  3. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; backg ...

  4. CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

    首页   登录注册         CSS 黑魔法小技巧,让你少写不必要的JS,代码更优雅 阅读 8113 收藏 927 2017-09-26 原文链接:github.com 腾讯云容器服务CSS,立 ...

  5. html/css/js小技巧实例

    一些学习中碰到的小技巧 让div自动撑起来: .clearfix:after{ content: "."; clear: both; display: block; visibil ...

  6. 一些常用的html/CSS效果---小技巧

    我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table ...

  7. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  8. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  9. 【温故知新】——CSS黑魔法小技巧可以少些不必要的js

    前言:这篇文章是转载[前端开发博客]的一篇技术文章,并非本人所写.只是个人觉得很实用,所以分享给大家.原文链接:github.com 1.利用 CSS 的 content 属性 attr 抓取资料需求 ...

随机推荐

  1. django models使用学习记录

    如何更新单个数据 example = User.objects.get(id=1) example.is_acitve=1 example.save() 如何更新多个数据 examples = Use ...

  2. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  3. history and its relevant variables in Linux/GNU and Mac OS history命令以及相关环境变量

    对于Terminalor们,history命令并不陌生,什么!n, !!更是很常用的,而且您在命令行敲的cmds是默认保存在/home/$USER/.bash_history(linux) /User ...

  4. windows cmd command line 命令

    Reference: 1. http://msdn.microsoft.com/en-us/library/ms977170.aspx(前面有一段VB看不懂没关系) 2. http://csserve ...

  5. rsync 远程数据同步工具详解

    rysnc 命令用法:(OPTION-参数,USER-用户,HOST-IP地址,SRC-复制源位置,DEST-复制目标位置)Shell拉:rsync [OPTION] [USER@]HOST:SRC ...

  6. halcon学习笔记——机器视觉工程应用的开发思路【转】

    转自:http://www.cnblogs.com/hanzhaoxin/archive/2013/02/15/2912879.html 机器视觉工程应用主要可划分为硬件和软件两大部分. 硬件:工程应 ...

  7. Perl 和 Python 的比较 【转】

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&id=4662991&uid=608135 作为万年Perl 党表示最近开 ...

  8. 6、XML（2）

    1 总结XML基础 XML基础 1)XML的作用 1.1 作为软件配置文件 1.2 作为小型的"数据库" 2)XML语法(由w3c组织规定的) 标签: 标签名不能以数字开头,中间不 ...

  9. ［转］iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    转载地址:http://blog.csdn.net/totogo2010/article/details/8048652 iOS的应用程序的生命周期,还有程序是运行在前台还是后台,应用程序各个状态的变 ...

  10. Safecracker 分类： HDU 搜索 2015-06-25 21:12 12人阅读 评论(0) 收藏

    Safecracker Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...