1.position:relative

相较于正常位置的定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: relative;

        left: 50px;//第二个div块离左边窗口50px

        top: 10px;//div2块相对于上面的div1块有
10px

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

</body>

</html>

下图为代码结果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: relative;

        left: 150px;

        top: -150px;

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: relative;

        left: 150px;//div2相对于div1距离左边有150px

        top: -150px;//div2相对于div1距离上边有150px

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

</body>

</html>

下图为代码结果：

2.position:absolute若滚动浏览器，则区块随之滚动

相对于浏览器窗口的左上角

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: absolute;

        left: 160px;//距离窗口左边160px

        top: 150px;//距离窗口上边150px

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

</body>

</html>

下图为代码结果：

3.position:fixed位移基于浏览器左上角，以这种方式定位，若滚动窗口这个区块不随之滚动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: fixed;

        left: 160px;

        top: 150px;

    }

    p{

        font-size: 50px;

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

    <p>带我飞积极发挥好长度均带我飞积极发挥好长度均带

            带我飞积极发挥好长度均带我飞积极发挥

            带我飞积极发挥好长度均带我飞积极发挥好长度均

            带我飞积极发挥好长度均带我飞积极发挥好长度均

            带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发
挥好长度均带带我飞积极发挥好长度均我飞积极发挥好长度均带我飞积极发挥好带我飞积极发挥好长度均长度均带我飞
积极发挥好长度均带我飞积极发带我飞积极发挥好长度均挥好长度均带我飞积极发挥好长度均带我飞带我飞积极发挥好长
度均积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均

            带我飞积极发挥好长度均好长度均我飞积极发挥好长度均</p>

</body>

</html>

下图为代码结果：

4.position:static表示默认值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    #div1{

        width: 150px;

        height: 150px;

        background-color: red;

    }

    #div2{

        width: 150px;

        height: 150px;

        background-color: yellow;

        position: static;

    }

    </style>

</head>

<body>

    <div id="div1">woshidiv1</div>

    <div id="div2">woshidiv2</div>

</body>

</html>

下图为代码结果：

5.position:auto由浏览器自己计算

关于position的操作的更多相关文章

  1. android操作通讯录的联系人

    界面配置文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     and ...

  2. RecycleView 实现多布局

    最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...

  3. XML数据 JSON数据 LitJSON 数据 的编写和解析 小结

    用XML生成如下数据<?xml version="1.0"encoding="UTF-8"?><Transform name="My ...

  4. 条款3：尽可能地使用const

    如下为const修饰的几种类型: char name[] = "benxintuzi"; char* p1 = name;                // non-const ...

  5. 【原创】java NIO FileChannel 学习笔记 FileChannel 简介

    java NIO 中FileChannel 的实现类是  FileChannelImpl,FileChannel本身是一个抽象类. 先介绍FileChannel File Channels 是线程安全 ...

  6. Java NIO之缓冲区

    1.简介 Java NIO 相关类在 JDK 1.4 中被引入,用于提高 I/O 的效率.Java NIO 包含了很多东西,但核心的东西不外乎 Buffer.Channel 和 Selector.这其 ...

  7. Xapian的内存索引

    关键字:xapian.内存索引 xapian除了提供用于生产环境的磁盘索引,也提供了内存索引(InMemoryDatabase).内存索引.我们可以通过观察内存索引的设计,来了解xapian的设计思路 ...

  8. 感悟优化——Netty对JDK缓冲区的内存池零拷贝改造

    NIO中缓冲区是数据传输的基础,JDK通过ByteBuffer实现,Netty框架中并未采用JDK原生的ByteBuffer,而是构造了ByteBuf. ByteBuf对ByteBuffer做了大量的 ...

  9. android -------- Data Binding的使用 RecyclerView

    今天来说说DataBinding在列表RecyclerView中的使用 列表绑定 App中经常用到列表展示,Data Binding在列表中一样可以扮演重要的作用,直接绑定数据和事件到每一个列表的it ...

随机推荐

  1. 【BZOJ1066】 [SCOI2007]蜥蜴

    Description 在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平 ...

  2. 【CF1250G】Discarding Game（DP)

    题意:A和B玩游戏,一共n轮,A先B后,第i轮两人分别能得到a[i]和b[i]的得分,累加到当前得分和中 每一轮进行完之后A可以选择抵消得分,即两者都减去两者的min 若某个时刻某个人得分和不小于K则 ...

  3. springboot(三).springboot用最简单的方式整合mybatis

     Springboot整合mybatis 在众多的orm框架中,我使用最多的,最习惯的,也是目前使用最广泛的就是mybatis,接下来我们就去将springboot整合mybatis 对于spring ...

  4. （二）SQL -- 查询

    主要包含以下内容: 单表查询.子查询.多表查询(左连接右连接等).合并查询 单表查询: 基础查询语句: select 列名 from 表名 where 条件 group by 列名 order by ...

  5. socket的补充

  6. Jcaptcha组件和kaptcha组件实现验证码

  7. ASP.NET中调用百度地图API

    1.打开链接http://developer.baidu.com/map/jshome.htm这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开 ...

  8. IO负载高来源定位pt-ioprofile

    1.使用top -d 1 查看%wa是否有等待IO完成的cpu时间,简单理解就是指cpu等待磁盘写入完成的时间:IO等待所占用的cpu时间的百分比,高过30%时IO压力高: 2.使用iostat -d ...

  9. HyperV - glossary

    Root Partition - sometimes called partition. Manages machine-level functions such as device drivers, ...

  10. MyRocks安装部署

    参考:https://www.cnblogs.com/WonderHow/p/5621591.html CentOS 7.3 gflags:git clone https://github.com/g ...