CSS position 属性

时间：2021-06-27 09:48:18

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 属性

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 属性 &lpar;absolute 和fixed 区别&rpar;

    在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 属性&lowbar;css中常用position定位属性介绍

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

  6. css position属性

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

  7. CSS position属性 标签： css 2016-09-06 15&colon;58 78人阅读 评论&lpar;0&rpar; 收藏

    踩了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. Chrome代码下载及编译

    2-3年前在做客户端开发时,看过CHROME的一部分代码,主要是BASE库相关的.其项目之大,编译时间之长给我留下了深刻的印象. 3年后的最近,想着再读一下其他部分的代码,所以就对其纠结的下载和编译过 ...

  2. jmap命令&lpar;Java Memory Map&rpar;&lpar;转&rpar;

    JDK内置工具使用 一.javah命令(C Header and Stub File Generator) 二.jps命令(Java Virtual Machine Process Status To ...

  3. App自适应

    http://blog.csdn.net/newjueqi/article/details/42779221

  4. Oracle数据库之间数据同步

    这段时间负责某个项目开发的数据库管理工作,这个项目中开发库与测试数据库分离,其中某些系统表数据与基础资料数据经常需要进行同步,为方便完成指定数据表的同步操作,可以采用dblink与merge结合的方法 ...

  5. 将外部准备好的sqlite导入到项目当中

    首先,将sqlite数据库文件放在Resource文件夹下,并且允许其编译到项目当中. 之后在AppDelegate当中执行一些代码,这里将代码封装了一个Helper: #import "R ...

  6. 流量计算-Jstorm提交Topology过程&lpar;下一个&rpar;

    马上部分流量计算-Jstorm提交Topology过程(上), 5.上篇任务已经ServiceHandler.submitTopologyWithOpts()方法.在该方法中,会实例化一个Topolo ...

  7. WiFi文件上传框架SGWiFiUpload

    背景 在iOS端由于文件系统的封闭性,文件的上传变得十分麻烦,一个比较好的解决方案是通过局域网WiFi来传输文件并存储到沙盒中. 简介 SGWiFiUpload是一个基于CocoaHTTPServer ...

  8. jcifs windows 域账户单点登录（转）

    1.首先从http://jcifs.samba.org 这个站点下载 jcifs-1.3.2.jar包. 2.把这个包放到相应的lib文件下面. 3.对web.xml文件进行配置,添加如下内容 &lt ...

  9. vba判断文件是否存在的两种方法（转）

    方法1. 用VBA自带的dir()判断,代码如下: 在 Microsoft Windows 中, Dir 支持多字符 (*)和单字符 (?) 的通配符来指定多重文件 Function IsFileEx ...

  10. git代码合并：Merge、Rebase的选择

    代码合并:Merge.Rebase的选择 Zhongyi Tong edited this page on Dec 7, 2015 · 3 revisions Pages 19 Home 2.1 快速 ...

相关文章