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>

　　

CSS position 属性的更多相关文章

  1. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  2. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  3. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  4. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  5. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  6. css position属性

    absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...

  7. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  8. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  9. CSS - position属性小结

    Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...

随机推荐

  1. c语言正则表达式

    标准的C和C++都不支持正则表达式,但有一些函数库可以辅助C/C++程序员完成这一功能,其中最著名的当数Philip Hazel的Perl-Compatible Regular Expression库 ...

  2. 高精度之+×÷

    以下是三种高精度算术的模版: 高精度加法: ",s1,s2; ],ss2[],len; void dashu(string s1,int ss1[]) { ;i>=;i--) { ;j ...

  3. Java 泛型 Java使用泛型的意义

    Java 泛型 Java使用泛型的意义 @author ixenos 直接意义 在编译时保证类型安全 根本意义 a) 类型安全问题源自可复用性代码的设计,泛型保证了类型安全的复用模板 b) 使用复用性 ...

  4. linux 移除svn文件夹

    find . -name .svn -type d -exec rm -fr {} \;

  5. git上传代码到github

    git上传代码到github [root@bigdata-hadoop- ~]# git init [root@bigdata-hadoop- ~]# git add zeppelin [root@b ...

  6. 一步一步学EF系列2【最简单的一个实例】

    整个文章我都会用最简单,最容易让人理解的方式给大家分享和共同学习.(由于live Writer不靠谱 又得补发一篇) 一.安装 Install-Package EntityFramework 二.简单 ...

  7. docker的一些命令

    转自:http://blog.csdn.net/wsscy2004/article/details/25878363 查看容器的root用户密码 docker logs <容器名orID> ...

  8. 关于 JAVA 中使用 Preferences 读写注册表时要注意的地方

    要注意的只有一个地方,那就是键名或者项名不要包含大写字母,否则读不到数据. 代码是这样的: 1: Preferences preferences = Preferences.systemRoot(); ...

  9. Nginx正向代理让无法直接上网的机器通过代理上网

    Nginx正向代理让无法直接上网的机器通过代理上网 在阿里云平台买了几台ECS.但是只要其中一台开通了公网.由于要初始化系统环境,需要网络安装相关依赖. Nginx正向代理配置: 一.Nginx 正向 ...

  10. csv格式导出文件

    先上传连个图片看看效果,这是界面效果dwz框架(springmvc开发) 点击导出csv效果图 js部分的代码(带条件查询的csv导出): function exportReportCsv(){ ex ...