很多网站我们看到在屏幕右下角有一个，返回顶部，始终在那儿，还有些网站顶部菜单栏永远也是固定的不动，就是通过今天学习的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. Spring Boot 揭秘与实战（二） 数据存储篇 - MySQL

    文章目录 1. 环境依赖 2. 数据源3. 脚本初始化 2.1. 方案一 使用 Spring Boot 默认配置 2.2. 方案二 手动创建 4. 使用JdbcTemplate操作5. 总结 4.1. ...

  2. 【leetcode】14-LongestCommonPrefix

    problem Longest Common Prefix 挨个比较每个字符串的元素是否相同,连续对应位置字符都相同,则为共同字符:否则不是. code class Solution { public ...

  3. 使用matlab和ISE 创建并仿真ROM IP核

    前言 本人想使用简单的中值滤波进行verilog相关算法的硬件实现,由于HDL设计软件不能直接处理图像,大部分过程都是可以将图像按照一定的顺序保存到TXT文档中,经过Modelsim仿真后,处理的数据 ...

  4. Python之路PythonNet，第二篇，网络2

    pythonnet   网络2 问题: 什么是七层模型tcp 和udp区别三次握手和四次挥手************************************************** tcp ...

  5. ACM-ICPC 2018 焦作赛区网络预赛- G：Give Candies（费马小定理，快速幂）

    There are N children in kindergarten. Miss Li bought them NNN candies. To make the process more inte ...

  6. C++ Tips

    1. 虚函数不能是内联的 因为“内联”是指“在编译期间用被调用的函数体本身来代替函数调用的指令,”但是虚函数的“虚”是指“直到运行时才能知道要调用的是哪一个函数.”如果编译器在某个函数的调用点不知道具 ...

  7. C++学习（二）之Visual Studio写system语句 生成可执行文件

    system命令 1.首先先介绍一些system命令 windows+tab  //切换窗口 windows+R  //调出命令窗口 命令: 输入 calc  打开计算机 输入 cmd 打开命令窗口 ...

  8. MySQL数据库-表内容操作

    1.表内容增加 insert into 表 (列名,列名...) values (值,值,值...); 添加表内容添加一条数据 insert into 表 (列名,列名...) values (值,值 ...

  9. Http&Tomcat

    一张图 tomcat的安装和启用: Tomcat有安装版和解压版(绿色版)安装版以.exe形式的安装包,双击安装到我们的电脑上,用的比较少.解压版,即绿色版,解压后直接使用,用的比较多 bin:脚本目 ...

  10. django+uwsgi+nginx数据表过大引起"out of memory for query result"

    昨天负责的一个项目突然爆“out of memory for query result”. 背景 项目的数据表是保存超过10m的文本数据,通过json方式保存进postgres中,上传一个13m的大文 ...