position：

定位，元素的定位与这五个属性相关。left,top,bottom,right,z-index

1. static （默认值）。没有定位，五个属性都不起作用。

2. inherit 继承父类定位，IE不支持

      3. relative 相对的，即相对于元素的正常位置，五个属性都起作用。

  <style type="text/css">

    .div1{

        padding:10px 0px;

        width:200px;

        height:50px;

        background-color:green;

        margin:5px;

    }

    .relativeTest{

        width:300px;

        position:relative;

        left:10px;

        top:-15px;

        background-color:red;
        z-index:-1;

    }

  </style>

 </head>

 <body>

    <div class="div1">

        zhangsan

    </div>

    <div class="relativeTest">lisi</div>

 </body>

加入position:relative ，属性left和top的值就会参照相对于第一个div的最下端位置偏移。当偏移top负值则向上出现于第一个div重叠的现象。

这个时候就要设置 z-index:[数字],来设置上下关系。

relative虽然位置移动了，但原先的位置还是保留的，下一个元素不会侵占此部分。

4. fixed 即相对于屏幕的正常位置，五个属性都起作用。

这个position:fixed;指明五个属性相对于浏览器屏幕的位置。不会随着文档的移动而移动。因是浮动到屏幕的，因此就没有父元素一说，因此width:100%就不起作用，变为inner-block.

5. absolute 绝对定位 即相对于具有position为(absolute,relative,fixed的父级元素而言)的正常位置，五个属性都起作用。

absolute的绝对，指从当前元素往上查找第一个带有position为(absolute,relative，fixed）的元素作为包裹元素进行定位，找不到则以html为包裹元素。

因为有浮动性，因此width:100%将不起作用，以找到有position的父级元素为准。

题外：  float:**;

float是相对于包裹的父级block元素而言，内部元素失去block，变为一个挨着一个，根据排列规则是left还是right的浮动元素，失去原有的位置。

后续的元素将占据当前元素的位置。因此需要通过clear:both，占据当前位置。

<style type="text/css">

    .flo{

        float:right;

        padding:5px;

    }

    .clear{

        clear:both;

    }

<style>

<div class="aaa">

        <div class="flo">1</div>

        <div class="flo">2</div>

        <div class="flo">3</div>

        <div class="flo">4</div>

        <div class="clear"></div>

</div>

<div>5666</div>

position_css的更多相关文章

随机推荐

  1. sql 变量赋值

    mysql 的变量赋值如下: set @name='app' ; or set @name:='appfirst'; or with select select @appname:='you name ...

  2. FastAdmin 插件的 Git 开发流程（简明）

    FastAdmin 插件的 Git 开发流程(简明) cms zip 安装 包安装 删除 addons 里的 cms 使用 mklink 软链接到 cms 插件 Git 仓库 修改 cms 插件 gi ...

  3. SPA页面缓存再优化二

    部署到线上的步骤: 拿到打包之后的文件,删除服务器上的文件,再放上去的. 测试1: 更改js文件,删除并上传新包. 额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不 ...

  4. Qt下 QString转char*（转）

    Qt下面,字符串都用QString,确实给开发者提供了方便,想想VC里面定义的各种变量类型,而且函数参数类型五花八门,经常需要今年新那个类型转换 Qt再使用第三方开源库时,由于库的类型基本上都是标准的 ...

  5. SiteMap Editor for Microsoft Dynamics CRM 2011 使用说明

    How to connect to CRM environments using this tool If you already connected to a CRM deployment usin ...

  6. 共享设置及ftp设置

    第一部分 共享设置 一.添加编译选项 network---file transfer---aria2                                                   ...

  7. Mongodb基础用法及查询操作

    插入多条测试数据> for(i=1;i<=1000;i++){... db.blog.insert({"title":i,"content":&qu ...

  8. javacv 340使用 人脸检测例子【转载】

    Java下使用opencv进行人脸检测 工作需要,研究下人脸识别,发现opencv比较常用,尽管能检测人脸,但识别率不高,多数是用来获取摄像头的视频流的,提取里面的视频帧,实现人脸识别时通常会和其他框 ...

  9. 用exec调用带有output输出参数的存储过程

    用exec调用带有output输出参数的存储过程,想要得到输出参数的值,必须在调用参数后面加output关键字,如: declare @value int exec up_test    2,3,@v ...

  10. C# 关于out和ref的问题

    http://bbs.csdn.net/topics/320214035 问题: C#里非基础类型传参数都是以引用类型的方式,那么换句话说,out和ref除了基础类型外,实际上没有任何意义?是不是这么 ...