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. day43 数据库知识欠缺的

    一 什么是存储引擎 mysql中建立的库===>文件夹 库中建立的表===>文件 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制:比如处理文本用txt类型 ...

  2. TensorFlow学习线路

    如何高效的学习 TensorFlow 代码? 或者如何掌握TensorFlow,应用到任何领域? 作者:黄璞链接:https://www.zhihu.com/question/41667903/ans ...

  3. 2018第52周日&技术人员如何面对裁员？

    2018的最后一周,看了汽车的两个趋势,纯电动车和自动驾驶,两个现在很火但还有很多问题要解决的方向,尤其是自动驾驶.虽然它因为一些问题当前不能完全被克服,但因它而生的各种辅助驾驶技术却被用的越来越多, ...

  4. 一 JAVA整体概念以及安装部署

    JAVA 基本概念  JVM(JAVA virtual machine)java虚拟机,是java的能跨平台的核心,java的跨平台实现,就是在各种系统中布置JVM,然后java应用运行在JVM中,相 ...

  5. 辅助字符串处理类：org.apache.commons.lang3.StringUtils

    api 地址:http://commons.apache.org/proper/commons-lang/apidocs/index.html?index-all.html StringUtils 常 ...

  6. Linux下C/C++代码调用PHP代码(转)

    Linux下C/C++代码可以通过popen系统函数调用PHP代码并通过fgets函数获取PHP代码echo输出的字符串. //main.c char str[1024] = {0}; char *  ...

  7. java数组变量

    数组变量是一种引用类型的变量,能够指向数组对象.数组对象存储在堆内存中,当数组变量为局部变量时存储在栈内存中. int[] p = new int[]{5, 6, 7, 8, 9}; p是数组变量,指 ...

  8. ASP.NET WEB SERVICE 创建、部署与使用

    PS: 开发工具 VS2010, 所有工程都为Debug状态,本人刚接触 Web Service,此文为菜鸟入门用例,高手勿笑! 转载请注明出处 :http://www.cnblogs.com/yyc ...

  9. 【Spring实战-2】Spring4.0.4整合Hibernate4.3.6

    作者:ssslinppp      源程序下载:http://download.csdn.net/detail/ssslinppp/8751185  1. 摘要 本文主要讲解如何在Spring4.0. ...

  10. java操作Excel之POI（3）

    一.字体处理 /** * 字体处理 */ public static void main(String[] args) throws Exception { Workbook wb = new HSS ...