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

    Given two positive integers a and b,find suitable X and Y to meet the conditions: X+Y=a Least Common ...

  2. 如何在Power BI和Tableau之间进行选择？

    作者:Mike Gallucci 如今,当谈到商业智能(BI)分析软件时,有两个主要的行业领导者 - 微软的Power BI和Tableau.根据分析和业务平台的2018年Gartner Magic ...

  3. python base64 编解码，转换成Opencv，PIL.Image图片格式

    二进制打开图片文件,base64编解码,转成Opencv格式: # coding: utf-8 import base64 import numpy as np import cv2 img_file ...

  4. golang channel 总结

    1.未初始化的channel读,阻塞 package main import ( "fmt" "time" ) func main() { var ch cha ...

  5. HDU - 5785：Interesting （回文树，求相邻双回文的乘积）

    Alice get a string S. She thinks palindrome string is interesting. Now she wanna know how many three ...

  6. seo：网站被黑的预防及处理方法

    一.网站被黑的类型有哪些 1.网站挂木马  :通过网站后台 FTP等植入恶意代码 2.网站域名被恶意泛解析 3.跳转 4.百度快照劫持:黑客劫持快照在你不工作的时候进入你的网站的,一般是凌晨1点到5. ...

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

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

  8. 【挑战赛16A】【取石子】【组合数学】

    链接:https://www.nowcoder.com/acm/contest/113/A 来源:牛客网 取石子时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言5 ...

  9. 《DSP using MATLAB》Problem 5.35

    余弦序列的谱,原始频率w0会泄露到其它频率处. 从其它书中找到的证明过程: 代码: %% +++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  10. LG5056 【模板】插头dp

    题意 题目背景 ural 1519 陈丹琦<基于连通性状态压缩的动态规划问题>中的例题 题目描述 给出n*m的方格,有些格子不能铺线,其它格子必须铺,形成一个闭合回路.问有多少种铺法? 输 ...