很多网站我们看到在屏幕右下角有一个，返回顶部，始终在那儿，还有些网站顶部菜单栏永远也是固定的不动，就是通过今天学习的position来做的。

在style中加入 positon:fixed;top 0;left 0;right 0;就是固定在顶部

<body>

<div onclick="Top();" style="height: 30px;width: 30px;background: #396764;color: white;

position: fixed;bottom: 0;right: 0;

margin-bottom: 20px;margin-right: 20px;

">top</div>

<div style="height: 3000px;background: #dddddd;">body</div>

<script>

    function Top() {

        document.documentElement.scrollTop = 0;

    }

</script>

</body>

　　position 还有两个取值经常配合在一起用，relative,absolute.单独定义一个relative，是没有任何意义的，跟没定义一样。

　　relative放在父标签中，它的子标签中才用absolute。作用是子标签的位置是相对于父标签来说的

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

    <div style="position: absolute;top: 0;left: 0;width: 30px;height: 30px;background: #000;"></div>

    <div style="position: absolute;top: 0;right: 0;width: 30px;height: 30px;background: #000;"></div>

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

        <div style="position: absolute;top: 50px;left: 100px;width: 30px;height: 30px;background: #750e60;"></div>

    </div>

</div>

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

    <div style="position: absolute;bottom: -30px;right: -30px;width: 30px;height: 30px;background: #000;"></div>

</div>

　　

position 分层固定在屏幕某位置的更多相关文章

  1. 将HTML的页脚固定在屏幕下方

    /********************************************************************* * 将HTML的页脚固定在屏幕下方 * 说明: * 处理的 ...

  2. 设置一个DIV块固定在屏幕中央（两种方法）

    设置一个DIV块固定在屏幕中央(两种方法) 方法一: 对一个div进行以下设置即可实现居中. <style> #a{ position: fixed; top: 0px; left: 0p ...

  3. 完美解决 IE6 position:fixed 固定定位问题

    关于 position:fixed; 属性 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. pos ...

  4. Swift实现封装PopMenu菜单，可在屏幕任意位置弹出

    效果图: 说明: 代码现已支持 Swift3 语法 使用介绍: 1.初始化位置 //frame 为整个popview相对整个屏幕的位置 箭头距离右边位置,默认15 //popMenu = SwiftP ...

  5. WPF 获得鼠标相对于屏幕的位置，相对于控件的位置

    相对于屏幕的位置 第一步: /// <summary>    /// 用于获得鼠标相对于屏幕的位置    /// </summary>    public class Win3 ...

  6. android 屏幕单击位置测试

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. Android 利用代码在屏幕中间位置显示ProgressDialog和ProgressBar

    package cc.testprogressdialog; import android.os.Bundle; import android.view.Gravity; import android ...

  8. WPF中获取鼠标相对于屏幕的位置

    原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置                                   周银辉WPF编程时,我们经常使用Mouse.GetPosi ...

  9. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

随机推荐

  1. cxf动态调用外部web service 报告异常java.lang.NoSuchFieldErr

    原因:cxf 依赖的xmlschema-core 与axis2-kernel依赖的xmlschema冲突. 解决方法:因为在项目中只用cxf即可,所以删除axis2的依赖.

  2. 小白学习前端---第一天 了解HTML

    一.HTML的结构 1.1 html文档主要包含两个部分:头区域和实体区域. 1.2 html的三个主要标签:<html>.<head>.<body>.<ht ...

  3. Pytorch自定义dataloader以及在迭代过程中返回image的name

    pytorch官方给的加载数据的方式是已经定义好的dataset以及loader,如何加载自己本地的图片以及label? 形如数据格式为 image1 label1 image2 label2 ... ...

  4. ldd 查看程序依赖库

    ldd 查看程序依赖库 https://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/ldd.html

  5. 压缩文件破解rarcrack-支持格式zip，rar和7z

    Kali上没有,需要自己安装 apt-get install rarcrack 安装成功后, 新建一个文本文档,元素: <?xml version="1.0" encodin ...

  6. 数字int字符串str（深入学习）

    数字int字符串str 查看一个对象的类 如:如查看对象变量a是什么类          用到函数type(),函数值是要查看的对象变量 1 #!/usr/bin/env python 2 # -*- ...

  7. [原]android 链接错误

    由于没有使用NDK的makefile, 而是把NDK的toolchain集成到现有的build system, 所以出现了诡异的错误: unsupported dynamic reloc R_ARM_ ...

  8. LG3978 【[TJOI2015]概率论】

    前置:卡特兰数 记\(C_n\)为\(n\)个节点的二叉树的个数,\(C_0=1\),对于\(n \geq 1\),取一个根节点,枚举其左子树大小,有 \[C_n=\sum_{i=0}^{n-1}C_ ...

  9. SpringJDBC——jdbcTemplate模板

    一.定义 Spring框架对jdbc进行了封装,提供的一个JDBCTemplated对象简化jdbc开发. 使用步骤 1 导包spring-beans-5.0.0-RELEASE.jar,spring ...

  10. chrome自带调试工具介绍

    Chrome浏览器不仅可以调试页面.JS.请求.资源.cookie,还可以模拟手机进行调试等等,为开发者提供了很多方便,下面就介绍一下我常用到的调试技巧. 1.chrome浏览页面常用快捷键 Ctrl ...