CSS 基础 3 - 定位 Postion 属性

static

  • position 属性的默认值，元素随 HTML 流移动
  • top/left/right/bottom 属性无效

relative

和 static 类似，元素随 HTML 流移动。区别：

  • 比 static 多了 top/left/right/bottom（设定偏移量）
  • 【父相子绝】【可以作为父元素，让内部的 absolute 元素根据 relative 的位置去定位

absolute

  • 相对父元素（不能是 static，一般是 relative）的位置，通过 top/left/right/bottom 指定
  • absolute 元素完全无视 static（父元素）
  • 不随 HTML 流移动，但会随滚动条滚动

fixed

和 absolute 类似，区别：

  • fixed 不随页面滚动，常用于弹窗小广告
  • fixed 元素一旦设定了 top/left/right/bottom，则只相对 body 来定位，即使父元素是 relative 也不再相对 relative 父元素来定位！

sticky

类似于 static，随 HTML 流移动，但

  • top:0，一旦 top 与上方距离为 0，则触发 sticky，不再滚动。常用于导航栏

Reference

https://www.bilibili.com/video/BV1iE411W7ug

CSS 基础 3 - 定位 Postion 属性的更多相关文章

  1. CSS基础-4 定位

    CSS定位和浮动 css定位:改变页面的位置 定位机制有以下三种 普通流 浮动 绝对布局 定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top          ...

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  3. CSS 基础 例子 定位及z-index

    position 属性指定了元素的定位类型. position 属性的四个值: static    不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...

  4. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. CSS 基础：定位元素(3)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  6. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. CSS基础知识之文本属性二三事

    line-height 可以给某个元素指定一个不带单位的缩放因子,这样它的后代元素就会继承这个缩放因子,再根据自身的字号大小来计算自己的行高(line-height)值, body { font-si ...

  8. css基础回顾-定位：position

    w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...

  9. CSS基础-background的那些属性

    background的那些属性 background:背景的意思常用的六个属性 1.background-color:背景颜色 2.background-image:背景图像 3.background ...

  10. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

随机推荐

  1. VTable——不只是高性能的多维数据分析表格

    导读 VTable: 不只是高性能的多维数据分析表格,更是行列间创作的方格艺术家! VTable是字节跳动开源可视化解决方案 VisActor 的组件之一. 在现代应用程序中,表格组件是不可或缺的一部 ...

  2. .NET静态代码织入——肉夹馍（Rougamo）发布2.0

    肉夹馍(https://github.com/inversionhourglass/Rougamo)通过静态代码织入方式实现AOP的组件,其主要特点是在编译时完成AOP代码织入,相比动态代理可以减少应 ...

  3. struct 结构体【GO 基础】

    〇.前言 虽然 Go 语言中没有"类"的概念,也不支持"类"的继承等面向对象的概念,但是可以通过结构体的内嵌,再配合接口,来实现面向对象,甚至具有更高的扩展性和 ...

  4. oracle命令7 -rman命令

    $ rman targer /RMAN> show all; #查看rman中所有的配置RMAN configuration parameters for database with db_un ...

  5. 【论文阅读】点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps

    [论文阅读]点云地图动态障碍物去除基准 A Dynamic Points Removal Benchmark in Point Cloud Maps 终于一次轮到了讲自己的paper了 hahaha, ...

  6. 6.使用leetcode去练习语言

    目录 1 本章预览 2 简单题举例 2.1 题目描述 2.2 题目解析 2.3 题解 2.4 涉及基础语法 3 中等题举例 3.1 题目描述 3.2 题目解析 3.3 题解 3.4 涉及基础语法 4 ...

  7. P2951 [USACO09OPEN] Hide and Seek S 题解

    Problem 题目概述 给你一个无向图,边权都为 \(1\) ,求:离 \(1\) 号点最远的点的编号.最远的距离.有几个点是离 \(1\) 号点最远的. 思路 直接用:优先队列 \(BFS\),先 ...

  8. video.js 视频

    http://www.cnblogs.com/lechenging/p/3858181.html

  9. STM32CUBEIDE 如何将变量定义到指定内存地址

    使用场景如下: 我需要将bootloader/APP的版本号和一些字段信息定义到指定FLASH地址. 在STM32CubeIDE中的方法: 截止当前STM32CubeIDE还没有提供图形化的针对FLA ...

  10. logmein

    打开以后发现就是简单的字符串操作 关键比较 其中v7出按r转成字符 然后写出脚本进行操作 但是最后输出的结果不太对的样子 看了wp才知道以LL结尾的那个地方转为字符串以后要逆序操作,即字符串在内存中是 ...