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. 如何将python源文件打包成exe文件

    PyInstaller是一个十分有用的第三方库,它能够在Windows.Linux.Mac OS X 等操作系统下将 Python 源文件打包,通过对源文件打包,Python 程序可以在没有安装 Py ...

  2. shell变量与运算

    shell变量与运算 @(0003 shell编程) 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$号,只有引用变量的值时才使用$号.也就是说在内存中,标记变量的变量名称是str,而不 ...

  3. 2.Python环境搭建Window、mac、linux

    1.Windows安装Python详解 使用任何高级编程语言都需要有一个自己的编程环境,Python 也不例外.只要使用 Python,就必须要配置 Python 的开发和运行环境. Python 本 ...

  4. 关于tomcat的server.xml里host节点配置的一些说明

    其实对这个一直搞不清楚,后来公司的网站遭遇与IIS进行整合,然后上面有几个应用需要进行配置,所以对tomcat的server.xml进行了一些深入的了解 Host的节点主要是起一个对域名解析到那个虚拟 ...

  5. android api文档：intent阅读笔记

    intent是几大组件之间进行通信的组件.可以包含以下几个部分: component:指明了处理该intent的对象. Action类似于一个函数名,规定了其他部分的对应用法: The action ...

  6. 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

  7. C++ STL 关于双向链表list的splice函数

    转载自https://blog.csdn.net/qjh5606/article/details/85881680 list::splice实现list拼接的功能.将源list的内容部分或全部元素删除 ...

  8. java利用zip解压slpk文件

    public static void main(String[] args) { File file = new File("C:\\Users\\Administrator\\Deskto ...

  9. 九：flask-response响应

    1.如果返回的是个合法的响应对象,则直接返回 同时,也可以在response里面做一些操作,比如增加cookie 2.如果返回的是一个字符串,那么flask会重新创建一个werkzeug,wrappe ...

  10. 性能测试工具之Apache ab

    一.apache ab简介 ab全称ApacheBench,是著名的Web服务器软件apache附带的一款非常简单的压力测试工具,它可以同时模拟多个并发请求,测试Web服务器最大承受压力.Apache ...