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. dbt 基本试用

    dbt 是一个很不错的进行etl 中的t 处理的工具,灵活简单,我们需要写的就是select 语句 dbt 帮助我们进行处理 测试集成了graphql 以及使用docker 运行 安装 pip ins ...

  2. HTTP协议中的长连接、短连接、长轮询、短轮询

    长连接.短连接,指的是TCP连接.长连接是为了复用TCP连接. 长轮询中,服务器如果检测到库存量没有变化的话,将会把当前请求挂起一段时间(这个时间也叫作超时时间,一般是几十秒).在这个时间里,服务器会 ...

  3. java关键字，保留字

    Java语言有51个保留关键字,其中const和goto虽然被保留但未被使用.你不能使用保留关键字来命名类.方法或变量. 一.保留关键字 数据类型: Boolean   int   long   sh ...

  4. net.sf.ezmorph.bean.MorphDynaBean cannot be cast to java.util.Map

    public static void main(String[] arg0) { String reString = "{" + "\"code\": ...

  5. Java中对话框的弹出

    最近在做学校的课程设计,java编程需要用到对话框弹出,第一反应是js中的alert和confirm,java的话瞬间懵,查阅学习总结如下,用以以后的学习 1.显示一个错误对话框,该对话框显示的 me ...

  6. bzoj1034 泡泡堂

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵 ...

  7. GIS（地理信息系统）

    ylbtech-杂项:GIS(地理信息系统) 地理信息系统(Geographic Information System或 Geo-Information system,GIS)有时又称为“地学信息系统 ...

  8. unity3d之Editor的Assembly-CSharp.dll文件路径

    在Editor中与自己project中使用的Mono与Managed文件夹路径区别: Editor中:在unity安装路径[AppDir]下: 自己project中:在project的路径下,由bui ...

  9. HP-UX oracle RAC 双机实践 (转载)

    一.软硬件配置检查 1.检查内存#/usr/contrib/bin/machinfoCPU info:  4 Intel(R) Itanium 2 9100 series processors (1. ...

  10. Swift里的CAP理论和NWR策略应用

    http://blog.sina.com.cn/s/blog_57f61b490101a8ca.html 最近有人讨论到swift副本数是否能够调整,3副本成本过高,如果改成2副本怎么样?多聊了几句以 ...