绑定定位

  • 少废话，上例子
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body style="height:3000px"> <!-- 为了可以滚动页面 -->

        <div class="box">返回顶部</div>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

    </body>

</html>


div{

    height: 500px;

    background: #edd094;

    border: 2px solid;

    box-sizing: border-box;

}

.box{

    width: 100px;

    height: 50px;

    text-align: center;

    line-height: 40px;

    background: cyan;

    /*绑定定位

        以浏览器窗口为参考进行定位

        主要用在:固定在头部的导航栏 返回顶部,网页的侧边栏菜单 */

    position: fixed;

    bottom: 20px;

    right: 20px;

}
  • 效果截图

[Web 前端] 020 css 定位之绑定定位的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  7. Web前端面试指导(十)：元素定位有哪些？

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  8. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  9. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

随机推荐

  1. Codeforces 961 容斥叉积判共线 树状数组递增思想题

    A B C D 给你N个点 问你能不能有两条直线穿过这N个点 首先假设这N个点是可以被两条直线穿过的 所以两条直线就把这N个点划分成两个集合 我们取1 2 3三个点这样必定会有两个点在一个集合内 ch ...

  2. Nacos 快速开始

    原文:https://nacos.io/zh-cn/docs/quick-start.html https://www.jianshu.com/p/16ff6d6db0cf Nacos安装: 1.从 ...

  3. 链表中倒数第k个节点(python)

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 无力吐槽牛客网... class Solution: def FindKthToTail(self, head, k): # write code ...

  4. Python3 实现FTP功能

    目录结构: FTP_project/ ├── FTP_client │   ├── ftp_client.py │   └── __init__.py └── FTP_server ├── bin │ ...

  5. HDU 4758 Walk Through Squares ( Trie图 && 状压DP && 数量限制类型 )

    题意 : 给出一个 n 行.m 列的方格图,现从图左上角(0, 0) 到右下角的 (n, m)走出一个字符串(规定只能往下或者往右走),向右走代表' R ' 向下走则是代表 ' D ' 最后从左上角到 ...

  6. 软件安装——彻底卸载MySQL

    如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...

  7. webstorm主题更换和webstorm汉化

    主题更换方式一 主题类型:*.jar 在webstorm程序中选择 : 菜单栏 File -> Setting ->Import Settings  选中下载的.jar文件 主题更换方式二 ...

  8. WPF Microsoft.Practices.Unity 注入大法简单示例

    最近新入职了公司,做WPF方向的项目,进来后看到这边大量运用了依赖注入来解耦,采用的是Microsoft.Practices.Unity. WPF的话,目前主要有两个技术来实现IOC,unity和ME ...

  9. 解决：父类中的@NotNull无效以及@Notnull 验证list对象无效

    解决方法如图: controller层 vo.param层 父类验证注解要使用@NotEmpty 不能使用 @NotNull,否则验证无效的,反正笔者是没有成功过

  10. js刷新当前页面的5种方式

    1. reload reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false, ...