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. 什么是vfs以及它的作用

    VFS(Virtual File System,虚拟文件系统)是计算机操作系统中的一个概念,它提供了一个统一的抽象层,使得操作系统可以支持不同的文件系统类型和存储设备,而不需要直接与每个文件系统进行交 ...

  2. python3 gui 计时器

    # -*- coding: utf-8 -*- # @Time : 2023/4/4 21:53 # @File : 定时器gui.py # @Software: PyCharm Community ...

  3. Linux 在多个文件中搜索关键字

    摘要:使用grep或者rg在当前目录下所有文件中查找关键字.   在Linux操作系统下,搜索文件中的关键字可帮助用户快速找到所需的信息,满足快速排查问题的需求.在大型系统中,文件可能被保存在多个目录 ...

  4. 7.28 EOI

    #include <bits/stdc++.h> using namespace std; typedef long long ll; typedef double db; const i ...

  5. 使用 DDPO 在 TRL 中微调 Stable Diffusion 模型

    引言 扩散模型 (如 DALL-E 2.Stable Diffusion) 是一类文生图模型,在生成图像 (尤其是有照片级真实感的图像) 方面取得了广泛成功.然而,这些模型生成的图像可能并不总是符合人 ...

  6. 【matplotlib 实战】--雷达图

    雷达图(Radar Chart),也被称为蛛网图或星型图,是一种用于可视化多个变量之间关系的图表形式.雷达图是一种显示多变量数据的图形方法.通常从同一中心点开始等角度间隔地射出三个以上的轴,每个轴代表 ...

  7. 在Vue3中使用Element-Plus分页（Pagination ）组件

    在Vue3中使用Element-Plus分页(Pagination )组件 开发过程中数据展示会经常使用到,同时分页功能也会添加到页面中. 记:在Vue3中使用Element-Plus分页组件与表格数 ...

  8. Seaurl-分享一个云上网址收藏网站

    前言 最近网上发现一个强大的网址收藏网站,点击这里打开,分享给大家,希望大家会喜欢. 网址空间 "网址空间"是一个专业的在线平台,它允许用户分享他们在日常生活和工作中频繁访问的网站 ...

  9. Acwing4244牛的比赛

    Acwing4244.牛的比赛 题目部分 N 头奶牛,编号 1∼N,一起参加比赛. 奶牛的战斗力两两不同. 这些奶牛之间已经进行了 M轮两两对决. 在对决中,战斗力高的奶牛一定会战胜战斗力低的奶牛. ...

  10. 利用Jdk动态代理模拟MyBatis的Mapper功能

    本文将先介绍jdk动态代理的基本用法,并对其原理和注意事项予以说明.之后将以两个最常见的应用场景为例,进行代码实操.这两个应用场景分别是拦截器和声明性接口,它们在许多开发框架中广泛使用.比如在spri ...