很多网站我们看到在屏幕右下角有一个，返回顶部，始终在那儿，还有些网站顶部菜单栏永远也是固定的不动，就是通过今天学习的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. js - 如何使子元素阻止继承父元素事件

    想要阻止点击 #content 区域时触发a事件,需要在 #content 区域内加入阻止事件冒泡的代码,具体代码如下: <div id="box" onclick=&quo ...

  2. [link] 构建负载均衡服务器之一 负载均衡与集群详解

    一.什么是负载均衡 首先我们先介绍一下什么是负载均衡: 负载平衡(Load balancing)是一种计算机网络技术,用来在多个计算机(计算机集群).网络连接.CPU.磁盘驱动器或其他资源中分配负载, ...

  3. sequence to sequence模型

    sequence to sequence模型是一类End-to-End的算法框架,也就是从序列到序列的转换模型框架,应用在机器翻译,自动应答等场景. Seq2Seq一般是通过Encoder-Decod ...

  4. Android Hook框架adbi源码浅析（一）

    adbi(The Android Dynamic Binary Instrumentation Toolkit)是一个Android平台通用hook框架,基于动态库注入与inline hook技术实现 ...

  5. annotation注释简单介绍

    元数据的作用 如果要对于元数据的作用进行分类,目前还没有明确的定义,不过我们可以根据它所起的作用,大致可分为三类: l         编写文档:通过代码里标识的元数据生成文档. l         ...

  6. border重叠的问题

    可以在css中添加border:0:去掉其中的一条border

  7. 数据库设计画图工具powerdesigner

    powerdesigner 教程:http://jingyan.baidu.com/article/bea41d43684fa4b4c51be6cf.html

  8. java中事件驱动

    在java语言中,事件不是由事件源自己来处理的,而是交给事件监听者来处理,要将事件源(如按钮)和对事件的具体处理分离开来.这就是所谓的事件委托处理模型. 事件委托处理模型由产生事件的事件源.封装事件相 ...

  9. this语句的第三、四点

    接着上次的继续更新  up~` 第三点主体怎么找? 就在这个函数(方法)带不带“.”,如果函数和方法执行带“.”,那么this就指向“.”前面的对象,如果不带“.”就指向window. 第四点自执行函 ...

  10. 2017.7.11 fuse工作原理

    FUSE的工作原理如图所示.假设基于FUSE的用户态文件系统hello挂载在/tmp/fuse目录下.当应用层程序要访问/tmp/fuse下的文件时,通过glibc中的函数进行系统调用,处理这些系统调 ...