很多网站我们看到在屏幕右下角有一个，返回顶部，始终在那儿，还有些网站顶部菜单栏永远也是固定的不动，就是通过今天学习的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. HDU 2013（递归）

    Problem Description 喜欢西游记的同学肯定都知道悟空偷吃蟠桃的故事,你们一定都觉得这猴子太闹腾了,其实你们是有所不知:悟空是在研究一个数学问题!什么问题?他研究的问题是蟠桃一共有多少 ...

  2. 【转载】 opencv, PIL.Image的彩色图片维度 && caffe和pytorch的矩阵维度

    原文地址: https://blog.csdn.net/u011668104/article/details/82718375 ------------------------------------ ...

  3. MySQL（2）数据库 表的查询操作

    来源参考https://www.cnblogs.com/whgk/p/6149009.html 跟着源博客敲一遍可以加深对数据库的理解,同时对其中一些代码做一些改变,可以验证自己的理解. 本文改动了其 ...

  4. Templates中的for标签

    for 标签 {% for 变量 in 元组|列表|字典 %} {% endfor %} 在 Jinja2 模板的循环中,支持内部变量 - loop loop作用:记载当前循环中的一些相关信息 loo ...

  5. css完成下图

    <div></div> div{ height: 48px; width: 80px; padding: 0 16px 0 32px; background: rgba(0,0 ...

  6. 《DSP using MATLAB》Problem 5.6

    频率采样定理是这样的: 由上述定理可知,一个有限长序列(假设为N)的DTFT等间隔采样,采样数至少大于等于N. 代码: %% +++++++++++++++++++++++++++++++++++++ ...

  7. 堆栈详解 + 彻底理解Java的值传递和引用传递

    本文旨在用最通俗的语言讲述最枯燥的基本知识 学过Java基础的人都知道:值传递和引用传递是初次接触Java时的一个难点,有时候记得了语法却记不得怎么实际运用,有时候会的了运用却解释不出原理,而且坊间讨 ...

  8. 服务器cpu负载过高问题排查

    https://blog.csdn.net/MrZhangXL/article/details/77711996 第一步 :执行top命令,查出当前机器线程情况 top - 09:14:36 up 1 ...

  9. sailsjs learning note

    menu list: custom controller custom 模块使用 custom model custom middleware custom service ? 路由与对应的contr ...

  10. Go Example--变量

    package main import "fmt" //通过import导入fmt标准包 func main() { //定义变量,并初始化 var a string = &quo ...