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. nuget push 程序包到nuget服务器时报错 406 (Not Acceptable)

    1.在window服务器上部署nuget服务器时,发布包时出现请求报错 406 (Not Acceptable) 验证用户名.密码正确的情况下,还是出现上面错误.后面跟踪服务器日志,发现window\ ...

  2. Django简单操作

    一.静态文件配置 静态文件配置 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ] # 暴露给 ...

  3. (WCF) There is already a listener on IP endpoint 0.0.0.0:9999.

    有個nettcpbinding, service host總是不能起來,出現如題錯誤. 查了下,同樣的程序并沒有在進程裏面,但是看起來好像有其他的程序在占用這個Port C:\Program File ...

  4. Nginx的正则表达式

    Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点(俄文:Ра ...

  5. 【错误记录】Python 负数取余问题

    print(-123%10)   # 输出 7   print(-123%-10)  # 输出 -3 这里面第二条是我们一般意义上的取余操作.这里也特别标注一下,如果涉及到负数取余要用上述解决办法. ...

  6. pycharm 调用turtle模块时，窗口闪屏不能显示

    #如下代码时,在pycharm中运行时,窗口在程序结束后,直接关闭,不能看到绘制的图像. #在python自带的IDE中,在执行代码后,可以看到窗口的显示. import turtle t = tur ...

  7. Arthas随笔

    目录 Arthas 安装Java 安装 Arthas Arthas 命令及示例 源码分析 Arthas 安装Java 下载jdk 注意 下载的JDK版本要与linux操作系统相匹配,否则汇报No su ...

  8. ssm+ajax异步请求返回list遍历

    jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  9. Windows下开发环境搭建

    安装Make: https://sourceforge.net/projects/gnuwin32/ 安装G++:https://sourceforge.net/projects/mingw/

  10. SAAS方法论

    内容来源:https://12factor.net/ 如今,软件通常会作为一种服务来交付,它们被称为网络应用程序,或软件即服务(SaaS).12-Factor 为构建如下的 SaaS 应用提供了方法论 ...