[Web 前端] 020 css 定位之绑定定位

绑定定位

  • 少废话,上例子
<!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;
}
  • 效果截图

原文地址:https://www.cnblogs.com/yorkyu/p/10804491.html

时间: 2024-11-04 21:00:33

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

好程序员web前端分享CSS文件引用的最优方法

好程序员web前端分享CSS文件引用的最优方法,在html总引入css文件的方法: 1链接式: 2导入式: 区别: 使用链接式时,会在加载页面主体部分之前加载css文件,这样现实出来的页面一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果.从浏览者的感受来说,这是使用导入式的一个缺陷.** 链接式比导入式快. 当有多个文件链接到页面的时候会导致

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

好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 pr

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

官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/ 原文地址:https://www.cnblogs.com/zhsh666/p/11967944.html

Web前端面试指导(十):元素定位有哪些?

本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以本题的难易程度为简单. 解题思路 position为元素定位属性,包含以下属性值 1. absolute绝对定位 相对位置为父元素为非static的第一个父元素进行定位. 2. fixed  固定定位(老IE6不支持) 相对于浏览器窗口进行定位. 3. relative相对定位 相对于其正常(默认布

web前端之css快速入门

css简介 css概述 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 css基础语法 css规则由两个主要部分构成:选择器,以及一条或多条声明selector选择器 declaration声明 selector {declaration1; declaration2

Web前端--Html/Css

总结一下今天学的内容,虽然以前学过,但是再学感觉还是有需要学习的地方. Web前端–Html: 超文本标记语言(HyperText Markup Language) 1.整体骨架 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> </body> </ht

[Web 前端] 019 css 定位之绝对定位与相对定位

1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素元素脱离文档流不占据文档流的位置可以理解为漂浮在文档流的上方,相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位如果找不到,则相对于 body 元素进行定位 fixed 生成固定定位元素元素脱离文档流不占据文档流的位置可以理解为

web前端开发——css

一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得美观: 将HTML页面的内容与样式分离: 提高web开发的工作效率. 3.css的优势 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使页面布局更加灵活 减少网页的代码量,增加网页浏览器速度,节省网络带宽 运用独立页面的css,有利于网页被搜索引擎收录 二.css语法 css语法分为两部分:

【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

引子: 开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕? 看下面的html代码: <body> <div id="father-body"> <div class="item1"></div> </div> </body> 实现方法一: html, body,#father-body{ height:100%; width:100%; background-color:#12