position: relative | absolute | static | fixed

参考网站：http://blog.csdn.net/dyllove98/article/details/8967114

http://www.jb51.net/css/22213.html

http://blog.jobbole.com/49320/

实践网站：http://www.w3school.com.cn/cssref/pr_class_position.asp

static : 无特殊定位，对象遵循HTML定位默认规则 
absolute : 绝对定位。将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。相对于position属性非static值的最近父级元素进行偏移，如果父级都是static（文档流），则相对整个文档进行偏移。偏移后，原来的空间会被其他元素挤占 
relative : 相对定位。对象不能想绝对定位一样层叠，但可依据left，right，top，bottom等属性在正常文档流中相对原先对象的位置进行偏移。原先的位置会被其他元素挤占。

fixed : IE5.5及NS6尚不支持此属性 。可以使元素在屏幕上保持固定，下拉滚动条，位置也不改变

1.通过绝对定位，元素可以放置到页面上的任何位置，如果那个位置上有元素则覆盖了它。下面的标题距离页面左侧 100px，距离页面顶部 150px。

h2

  {

  position:absolute;

  left:100px;

  top:150px;

  }

如果两个元素重叠，则看z-index值的大小，显示z-index值最大的，默认的 z-index 是 0。Z-index 1 拥有更高的优先级。

2.通过相对定位，元素可以放置到页面上的任何位置，本身位置发生变化，而元素所占的物理空间还是存在，另外还有一点，定位后如果与原本那个位置上有元素，则与之重叠，两个元素都会显示

h2
  {
  position:relative;
  left:100px;
  top:150px;
  }

3.float

前两步，使用绝对定位都并不是很理想，那么我们可以考虑使用float来解决。我们可以在一个元素上使用float，让元素向左或向右，

而且还可以使用文本围绕在这个元素的周边（这个作用在文本围绕图片特别有用）。下面来模拟一下 float：left/right

4.为了让浮动元素的父元素不在处于塌陷状态下，我们需要对浮动元素进行清除浮动： clear:both;

5.fixed 固定在屏幕的某个位置 不管下滑上滑都不会变位置

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <style type="text/css">

#help{

    width:100%;

    height:50px;

    background-color:#ffff33;

    position:fixed;

    left:0px;

    bottom:0px;bottom

	color:red;

}

#top{

    width:100%;

    height:800px;

    background-color:#ff6600;

}

</style>

 <body>

 <div id="top"></div>

  <div id="help"><center><h2>我是底部P标签</h1></center></div>

 </body>

</html>

　　

最新文章

  1. 多线程同步工具——Lock
  2. MySQL分区表的管理~2
  3. 【JAVA并发编程实战】3、同步容器
  4. virtualbox 安装ubuntu
  5. Java魔法堂：以Windows服务的形式运行Java程序
  6. uva 122 trees on the level——yhx
  7. [iOS]C语言技术视频-14-指针变量高级用法(函数指针)
  8. java基本语法特殊点
  9. 解决linux删除文件后空间没有释放问题
  10. JDK源码分析（9）之 WeakHashMap 相关
  11. [FJOI2018]领导集团问题
  12. Hashmap的Hash()
  13. Vue-vue-cli初始化项目
  14. SpringBoot2.0.2 Application调用的三种方式
  15. 1.5 C++ new和delete操作符
  16. 一个简单的json解析器
  17. 【uoj#164】[清华集训2015]V 线段树维护历史最值
  18. Delphi XE TStringBuilder
  19. 【数据库】各种主流 SQLServer 迁移到 MySQL 工具对比
  20. Python文件对象的访问模式

热门文章

  1. POJ 1328 Radar Installation#贪心（坐标几何题）
  2. GROUP_CONCAT()多条数据.拼接字符串 最大长度1024
  3. [SOJ] connect components in undirected graph
  4. Java ZIP打包
  5. MongoDB执行计划分析详解
  6. 34．编写2个接口：InterfaceA和InterfaceB；在接口InterfaceA中有个方法void printCapitalLetter()；在接口InterfaceB中有个方法void printLowercaseLetter()；然 后写一个类Print实现接口InterfaceA和InterfaceB，要求printCapitalLetter()方法 实现输出大写英文字母表的功能，
  7. HTTP基础知识
  8. MySQL Administrator的简单操作
  9. JPA 系列教程19-jpa-uuid主键生成策略
  10. 安卓Activity组件