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. 神经网络内在逻辑：没打开的AI“黑匣子”

    转载自:http://www.elecfans.com/rengongzhineng/592200.html 伴随着大数据,AI在沉寂了多年之后,又迎来了新的高潮.在这场涉及大部分科学的革命中,人工神 ...

  2. Mac 安装 MongoDB 数据库

    1. 使用 brew install mongodb 安装 (参见下图) 2. 安装成功如下图 (成功与否可参考 方框内字符) 3. 启动 MongoDB 数据库 3.1 先创建数据库存储目录 /da ...

  3. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  4. Android网络技术之WebView常用方法

    public class WebViewTest extends Activity {       private WebView wv;     private EditText et;       ...

  5. AtCoder AGC001F Wide Swap (线段树、拓扑排序)

    题目链接: https://atcoder.jp/contests/agc001/tasks/agc001_f 题解: 先变成排列的逆,要求\(1\)的位置最小,其次\(2\)的位置最小,依次排下去( ...

  6. Spring Boot教程（二十）开发Web应用（1）

    静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  7. phpstorm的下载激活及定制使用和设置

    1.下载地址: 链接:https://pan.baidu.com/s/19PbZnzq0x7grgBge-iHI3w&shfl=sharepset  提取码:dnte 2.激活码获取:http ...

  8. 快速排序和二分查找(Javascript)

    var data = [8, 3, 4, 1, 18, 22, 11, 3, 5, 6, 2, 1, 77] quickSort(data, 0, data.length - 1) console.l ...

  9. 用ps 查看线程状态

    ps -eLo pid,tid,class,rtprio,ni,pri,psr,pcpu,pmem,stat,wchan:30,comm 线程相关选项: THREAD DISPLAY H Show t ...

  10. 改变主程序的入口 main

    main只是开发工具所规定的一个特殊函数名称而已.它既不是程序的入口,也不是必须要有的函数. 程序的入口点记录在可执行文件中的一个数据,该数据标明程序从哪个位置开始执行,这个数据是连接程序的时候由li ...