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. jQuery_完成复选框的全选与全不选

    别的不多说,直接上代码,用于完成复选框的全选与全不选. <!DOCTYPE html> <html> <head> <meta charset="U ...

  2. Android使用init.rc触发脚本实现隐藏内置应用

    [实现逻辑] 通过在property_service.c中设置标志位,在设置中实现接口改变标志位, 使用init.rc中声明的服务来侦听标志位的变化,显式启动声明的服务,执行对应的脚本,把应用后缀从a ...

  3. Spring Boot教程（一）在springboot中用redis实现消息队列

    环境依赖 创建一个新的springboot工程,在其pom文件,加入spring-boot-starter-data-redis依赖: <dependency> <groupId&g ...

  4. C++二维数组（指针）做参数

    一.问题描述 使用C++编程过程中经常需要使用到二维数组,然而初级程序员在使用过程中经常会出错使程序崩溃.下面就二维指针的定义,初始化,以及二维指针做参数给出简单介绍. 1.二维数组的定义与初始化 在 ...

  5. EasyHook

    EasyHook实用指南 所谓实用指南就是全是干货,没那么多虚头巴脑的东西,真正要用的人会发现对自己有用的东西,浅尝辄止的人看起来会不知所云. FileMon自己实做的过程中遇到的问题: 1. exe ...

  6. pip安装报错：Fatal error in launcher: Unable to create process using '"'

    pip安装包报错 解决方案: pip需要升级,可使用以下脚本: python -m pip install -U pip

  7. leetcode206 反转链表 两种做法（循环，递归）

    反转链表 leetcode206 方法1 循环 public ListNode reverseList(ListNode head) { if (head == null || head.next = ...

  8. vue 表格组件分享

    分享一款自己写的table组件  用起来还算简单好用   (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...

  9. 139、TensorFlow Serving 实现模型的部署(二) TextCnn文本分类模型

    昨晚终于实现了Tensorflow模型的部署 使用TensorFlow Serving 1.使用Docker 获取Tensorflow Serving的镜像,Docker在国内的需要将镜像的Repos ...

  10. iOS OC中桥接swift第三方库

    swift中有一些比较好的框架,比如绘图框架charts,最近项目中刚好用到,通过Pod的方式直接导入,xcode会自动生成charts-swift.h的文件,然后在需要导入的地方import < ...