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. All the Apache Streaming Projects: An Exploratory Guide

    The speed at which data is generated, consumed, processed, and analyzed is increasing at an unbeliev ...

  2. 将svnserve部署为后台服务

    由于svnserve运行模式没有部署为后台服务,很容易被人误关掉.于是在网上查了一下,发现也已经有人总结了.Copy过来,以作备忘. 以前的svnserve要想成为windows服务,必须依赖于svn ...

  3. 防范SQL注入漏洞攻击

    原理:通过拼sql语句,在输入框里输入' ; SHOW TABLES;注入这样的代码, 防范:你把全部的特殊符号都过滤掉(如单引号,双引号),自然就不会被注入 使用mysql_real_escape_ ...

  4. nyoj 魔法少女

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

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

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

  6. tomcat源码阅读之StandardWrapper解析

    一.UML图: 1.Tomcat中Wrapper代表一个独立的servlet实例,StandardWrapper类是Wrapper接口的标准实现类,StandardWrapper类还实现了Selvle ...

  7. postman 中 form-data、x-www-form-urlencoded、raw、binary的区别

    区别 form-data: 就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开.既可以上传键值对,也可以上传文件.当上传的字段是文件 ...

  8. MySQL中drop,truncate 和delete的区别

    注意:这里说的delete是指不带where子句的delete语句 相同点: truncate和不带where子句的delete, 以及drop都会删除表内的数据 不同点: truncate和 del ...

  9. socket、WebSocket

    WebSocket 协议本质上是一个基于TCP的协议,它由通信协议和编程API组成,WebSocket能够在浏览器和服务器之间建立双向连接,以基于事件的方式,赋予浏览器实时通信能力. socket本质 ...

  10. 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 ...