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. visual studio 2014 新特性

    原文如下: Visual Studio "14" CTP Today, we are making available a first community technology p ...

  2. WAJUEJI which home strong！nyoj

    WAJUEJI which home strong! 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 在一个山沟里,姐弟俩同时考上了大学.但由于家里拮据,所以这并不是 ...

  3. POJ3208魔鬼数

    题目:http://poj.org/problem?id=3208 与一般的数位dp有点不同的是,没有给出上界,而是要通过值来判断这一位该填什么. 当然是从高位向低位填. 为了知道这一位填下去对答案有 ...

  4. POJ2299逆序对模板(树状数组)

    题目:http://poj.org/problem?id=2299 只能相邻两个交换,所以交换一次只会减少一个逆序对.所以交换次数就是逆序对数. ps:原来树状数组还可以记录后边lowbit位的部分和 ...

  5. Microsoft Dynamics CRM 4.0 如何添加自定义按钮

    一.通过导入导出ISV.Config(ISV配置),具体如下图: 先设置—>打开导出自定义项—>选择ISV配置—>选择导出所选自定义项 点击确定 保存到桌面,解压,用VS打开cust ...

  6. 【数据库】使用JMeter创建数据库（Mysql）测试

    我的环境:MySQL:mysql-essential-5.1.51-win32 jdbc驱动:我已经上传到csdn上一个:http://download.csdn.net/detail/paulwin ...

  7. Mysql 性能优化2 系统参数配置方法 和 文件系统

    --------------------------------------------目录------------------------------------------------- • 关于 ...

  8. jQuery控制网页字体大小和肤色

    在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...

  9. 1010 Radix （25 分）

    1010 Radix (25 分) Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 1 ...

  10. Flex工程师面试

    这几天有一家公司需要招聘Flex开发的工程师,要求开发电力行业的WebGIS的电力方面的程序,当时也是被推荐过去的,随后的几天,自己也准备的一下,因为之前接触Flex的主要是开发一些医疗的项目,利用F ...