fixed的用法
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pg-header{

            background-color: red;

            height: 48px;

            /*添加position后可以使该div与其他div处于屏幕的不同层，fixed为将该div固定到浏览器窗口的指定位置，

            top、bottom、right、left四个方位代表了离屏幕有多少距离*/

            position: fixed;

            top: 0px;

            right: 0px;

            left: 0px;

        }

        .pg-body{

            background-color: darkgray;

            height: 5000px;

            margin-top: 50px;

        }

        .pg-back_to_top {

            background-color: black;

            color: white;

            height: 50px;

            width: 50px;

            position: fixed;

            right: 10px;

            bottom: 10px;

        }

    </style>

</head>

<body>

    <div class="pg-header">标题</div>

    <div class="pg-body">内容</div>

    <div onclick="GoTop();" class="pg-back_to_top">返回顶部</div>

    <script>

        function GoTop(){

            console.log("123")

            document.documentElement.scrollTop = 0;

        }

    </script>

</body>

</html>

absolute和relative用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--position的relative如果单独使用，没有任何效果，因为它是自己定义自己，对div自己没有任何实际意义。

但如果这个div的内部还有div，而且这个内部的div想要定义自己相对于父div的位置，就需要在自己的position

属性添加absolute-->

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position: absolute;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>

    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position: absolute;top: 0px;right: 0px;width: 50px;height: 50px;background-color: black"></div>

    </div>

    <div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

        <div style="position: absolute;top: 0px;width: 50px;height: 50px;background-color: black"></div>

    </div>

</body>

</html>e

z-index属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--z-index可以设置层级页面的优先级，值越大，优先级越高，优先级高的放在最上面-->

    <div style="z-index: 10;background-color: white;position: fixed;height: 200px;width: 400px;

    top: 50%;left: 50%;margin-top: -200px;margin-left: -200px">

        <input type="text"/>

        <input type="text"/>

        <input type="text"/>

    </div>

    <div style="z-index:9;position: fixed;background-color: darkgray;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    /*opacity属性为设置div的透明度，值越大，背景色越深*/

    opacity: 0.5"></div>

    <div style="height: 5000px;background-color: green">第一层页面</div>

</body>

</html>

position用法的更多相关文章

  1. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  2. HTML之Position用法

    在此,先做声明,本篇仅是摘录自互联网,个人认为这篇文章讲的很不错,附于此地与大家共同欣赏. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分 ...

  3. html 之 position用法

    引用: position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> ...

  4. 浅谈 css 之 position用法

    在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留 ...

  5. CSS中常见的位置(position)属性

    常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间 ...

  6. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  7. [js - 算法可视化] 汉诺塔（Hanoi）演示程序

    前段时间偶然看到有个日本人很早之前写了js的多种排序程序,使用js+html实现的排序动画,效果非常好. 受此启发,我决定写几个js的算法动画,第一个就用汉诺塔. 演示地址:http://tut.ap ...

  8. 顶点/片元 shader 总结

    Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中,有如下三种结构体: 1.appdata_base: 包含顶点位置,法线和一个纹理坐标.2.appdata ...

  9. WEB入门.六 盒子模型

    学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...

随机推荐

  1. ubuntu lts install licode tag pre-v5.4

    1. Requirements Ubuntu 14.04 LTS 2. Clone Licode codeYou first need to clone our code from github.Yo ...

  2. Jconsole 测试.

    Jconsole 测试. 1 下载并安装 d:\Program Files\Java\jdk1.8.0_111\ JDK自带,Windows下图形界面,监控分析Java程序 2 查看jmx进程号 [r ...

  3. CSS2实用知识点详解

    CSS相关知识回顾目录 CSS2选择器 假选择器的使用 属性选择器的使用 边框设置 背景设置 字体设置 文本属性 a标签假选择器使用 列表设置 表格设置 鼠标设置 单位设置 隐藏显示 位置设置 清除浮 ...

  4. EmguCV3.0几个控件的使用

    值方图(Histogram)是一种统计图数据,在影像处理中最常被用来统计一张图像或是感兴趣(ROI)区域的色彩分布,在这边本人使用的EmguCV 2.4.0版的内建值方图工具只有被包含在WinForm ...

  5. Microsoft Office Visio 2010如何创建UML 用例图

    转自:https://blog.csdn.net/mmoooodd/article/details/10513059 1..在Microsoft Office2010中打开Microsoft Visi ...

  6. touch: cannot touch `/home/tomcat7/logs/catalina.out': Permission denied

    今天打开虚拟机启动tomcat,Y的包这个错,普通用户登录的,一直报这个错误,竟然没有想起来是为什么,真是感到惭愧,其实原因很简单,就是logs文件夹没有读写的权限,一条 chmod -R 777 l ...

  7. 《Android应用性能优化》 第6章 性能评测和剖析

    1.时间测量 System.currentTimeMillis 精读和准确度可能不够:更改系统时间会影响结果:UTC时间1970/1/1 00:00:00到现在的毫秒数 System.nanoTime ...

  8. ListView里面嵌套CheckBox

    布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andro ...

  9. go语言的源码文件的分类及含义

    Go源码文件:名称以.go为后缀,内容以Go语言代码组织的文件 多个Go源码文件是需要用代码包组织起来的 源码文件分为三类:命令源码文件.库源码文件(go语言程序) 测试源码文件(辅助源码文件) 命令 ...

  10. Condition实现多线程顺序打印

    Condition实现多线程顺序打印: import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.R ...