属性介绍

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

案例

元素顶部固定

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      body {

        padding-left: 100px;

        padding-top: 100px;

      }

      header {

        /* 固定定位 */

        position: fixed;

        left: 0px;

        top: 0px;

        right: 0px;

        height: 60px;

        background: white;

        border-bottom: solid 5px blueviolet;

        box-shadow: 0 5px 10px #555;

      }

      main{

        width: 400px;

        height: 3000px;

        background: #333;

      }

    </style>

  </head>

  <body>

    <main></main>

    <header></header>

  </body>

</html>

效果展示

CSS: 绝对定位fixed的更多相关文章

  1. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  2. CSS绝对定位详解

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.直线电机生产厂家 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样.元素 ...

  3. CSS:position:fixed使用(转)

    position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...

  4. CSS 绝对定位和相对定位

    CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...

  5. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  6. 深入理解CSS绝对定位

    × 目录 [1]定义 [2]特性 [3]display[4]clip[5]静态位置[6]overflow 前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定 ...

  7. CSS绝对定位和相对定位 position: absolute/relative

    absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...

  8. css绝对定位、相对定位和文档流的那些事

    前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...

  9. 深入理解CSS绝对定位absolute

    前面的话 前面已经介绍了定位的偏移和层叠,例子中大量的应用了绝对定位.因为相较于相对定位和固定定位,绝对定位在实际中应用频率更高.应用场景更广泛.本文将介绍使用绝对定位时的具体细节 定义 当元素绝对定 ...

  10. css绝对定位

    绝对定位是我们在使用css时经常使用到的一种布局方式,下面说一下什么是绝对定位. 绝对定位使用position:absolute来定义,首先,要理解的是使用了绝对定位的元素它会脱离文档流,所谓脱离文档 ...

随机推荐

  1. Vue中使用Echarts 脱坑

    1. 数据问题,不像官方实例所提供的数据直接写在options对应的数据源里,开发中应当是后端接口请求过来的数据,一般来说,会将echarts图标抽成组件的形式,需要的数据源通过父组件传给子组件,但是 ...

  2. [C++核心编程] 4.6、继承

    文章目录 4.6 继承 4.6.1 继承的基本语法 4.6.2 继承方式 4.6.3 继承中的对象模型 4.6.4 继承中构造和析构顺序 4.6.5 继承同名成员处理方式 4.6.6 继承同名静态成员 ...

  3. 【配置教程】撑起月6亿PV开源监控解决方案

    上次分享过<一个.Net Core开源监控解决方案,支持Redis.Elasticsearch.SqlServer>,这是Stack Overflow 开源的监控产品,基于.Net Cor ...

  4. 【学习笔记】【题解】树形依赖 DP 选做

    地址:https://www.cnblogs.com/FReQuenter5156/p/shuxingyilaidp.html/ 简介 这类背包本质上是分组背包问题. 将一个节点的每一棵子树看作一组, ...

  5. 【Redis】持久化实现（RDB、AOF）

    一.Redis RDB 持久化 1.RDB 工作原理 RDB(Redis Database)基于时间进行生成数据快照,默认只保留当前最新数据状态,优点时执行速度较快,但上次数据保存点到当前时间点之间的 ...

  6. 2022-11-06：给定平面上n个点，x和y坐标都是整数， 找出其中的一对点的距离，使得在这n个点的所有点对中，该距离为所有点对中最小的。 返回最短距离，精确到小数点后面4位。

    2022-11-06:给定平面上n个点,x和y坐标都是整数, 找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的. 返回最短距离,精确到小数点后面4位. 答案2022-11- ...

  7. 2022-10-06：以下go语言代码输出什么？A：[1 2 3] [1 2 3] ；B：[1 2 3] [3 4 5]； C：[1 2 3] [3 4 5 6 7 8 9]；D：[1 2 3] [3

    2022-10-06:以下go语言代码输出什么?A:[1 2 3] [1 2 3] :B:[1 2 3] [3 4 5]: C:[1 2 3] [3 4 5 6 7 8 9]:D:[1 2 3] [3 ...

  8. 2021-06-18：已知数组arr，生成一个数组out，out的每个元素必须大于等于1，当arr[cur]＞arr[cur-1]时，out[cur]＞out[cur-1]；当arr[cur]＞arr

    2021-06-18:已知数组arr,生成一个数组out,out的每个元素必须大于等于1,当arr[cur]>arr[cur-1]时,out[cur]>out[cur-1]:当arr[cu ...

  9. pages.json 文件：pages 节点

    pages uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 属性 类型 默认值 描述 path String   配 ...

  10. XAF中XPO与EFCore的探讨

    前言 首先抛出一个问题,在XAF项目中,我们现在可不可以选择EFCore?每个人可能都有自己的答案,这也没有什么标准答案.下面是我的个人看法,在刚接触XAF时,如何选择ORM,我也是犹豫了许久,最终选 ...