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. es6 中，大多数开发者和 babel 之类的工具默认添加 use strict 到 JS 文件的头部，确保采用严格模式

    严格模式(use strict) 有助于防止问题用法,并且它也有助于安全使用 JavaScript. 在 ES5 中, 严格模式是可选项,但是在 ES6 中,许多特性要求必须使用严格模式. 因此大多数 ...

  2. java 设计模式：单例模式

    Java中单例模式是一种常见的设计模式,单例模式的写法有好几种,这里主要介绍三种:懒汉式单例.饿汉式单例.登记式单例. 单例模式有以下特点: 1.单例类只能有一个实例. 2.单例类必须自己创建自己的唯 ...

  3. maven工程下的“run as application”

    为了让maven能够在Terminal窗口执行(比在Console执行方便多了,命令行总是比右键选择run要快),需要配置如下的profile:然后敲入  mvn -test -Prun  即可.   ...

  4. 【unittest】unittest单元模块做assert

    我在Windows上开发Python用的版本是2.7,在Ubuntu上开发的版本是2.6,而在Python的unittest模块中,有几个方法是在2.7才有的,它们是: Method Checks t ...

  5. 大数据挖掘算法篇之K-Means实例

    一.引言 K-Means算法是聚类算法中,应用最为广泛的一种.本文基于欧几里得距离公式:d = sqrt((x1-x2)^+(y1-y2)^)计算二维向量间的距离,作为聚类划分的依据,输入数据为二维数 ...

  6. BASIC-30_蓝桥杯_阶乘计算

    题目: 问题描述 输入一个正整数n,输出n!的值. 其中n!=1*2*3*…*n. 算法描述 n!可能很大,而计算机能表示的整数范围有限,需要使用高精度计算的方法.使用一个数组A来表示一个大整数a,A ...

  7. bzoj2263: Pku3889 Fractal Streets

    给出两点编号,求如图所示的图中两点间欧氏距离*10取整 递归处理由编号求出坐标 #include<cstdio> #include<cmath> int T,n,s,t; vo ...

  8. java实验四——找鞍点

    package hello; public class 实验四 { public static void main(String[] args) { // TODO Auto-generated me ...

  9. Eclipse中安装及配置EGit插件

    转载:https://jingyan.baidu.com/article/59703552dcc5ad8fc107407e.html

  10. Quectel module USB driver for linux

    The environment settings are as follows: 1. ubuntu 14.04 , linux kernel: linux-lts-xenial-4.4.0 2. m ...