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. nyoj 魔法少女

    魔法少女 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 前些时间虚渊玄的巨献小圆着实火了一把. 在黑长直(小炎)往上爬楼去对抗魔女之夜时,她遇到了一个问题想请你帮忙. 因为 ...

  2. dongle0

    *CLI> -- [dongle0] Trying to connect on /dev/ttyUSB2... 插拔dongle[Jan 13 23:42:20] WARNING[3443]: ...

  3. Arrays、ArrayUtils 区别

    Arrays java.util 包提供的静态类:java.util.Arrays 此静态类专门用来操作array ,提供搜索.排序.复制等静态方法. ArrayUtils apache 提供的类:o ...

  4. 大数据学习资料之SQL与NOSQL数据库

    这几年的大数据热潮带动了一激活了一大批hadoop学习爱好者.有自学hadoop的,有报名培训班学习的.所有接触过hadoop的人都知道,单独搭建hadoop里每个组建都需要运行环境.修改配置文件测试 ...

  5. js中如何快速获取数组中的最大值最小值

    var a=[1,2,3,5]; alert(Math.max.apply(null, a));//最大值 alert(Math.min.apply(null, a));//最小值 多维数组可以这么修 ...

  6. dubbo实战

    http://blog.csdn.net/hejingyuan6/article/details/47403299

  7. js正则表达式30分钟入门教程

    2011-10-27 13:23:15 如何使用本教程 最重要的是——请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门——除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要 ...

  8. C# OracleBulkCopy 批量插入oracle数据库的方法

    只有安装了oracle 11G客户端的机器上才可以用,要用到ODP.NET组件中的oracleDataAccess.DLL,命名空间引用为Oracle.DataAccess.Client; 引用:Or ...

  9. AngularJS---核心特性

    步入正题.学习Angular,首先得了解.熟知.掌握它的四大核心特性. 一.MVC模式 Model(模型):是应用程序中用于处理应用程序数据逻辑的部分,通常模型对象负责在数据库中存取数据. View( ...

  10. binlog之五：mysqlbinlog解析binlog乱码问题解密

    发现MySQL库的binlog日志出来都是乱码,如下所示: BINLOG ’ IXZqVhNIAAAALQAAAGcBAAAAAHoAAAAAAAEABHRlc3QAAno0AAEDAABUOcnY  ...