【CSS】HTML页面定位CSS - position 属性 relative 、absolute、fixed 、sticky
目录
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
position：relative 、absolute、fixed 、sticky （四选一）
top：距离上面的像素
bottom：距离底部的像素
left：距离左边的像素
right：距离右边的像素
relative 相对定位
相对于自身在原来默认的位置，进行 top、bottom、left、right 来调整位置
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>
/* 相同的样式可以写一起，不要重复操作*/
#div_1,#div_2 { width: 20px;height: 20px;border: 1px solid ;color: white;font-size: 5px;}#div_1{background: black;}#div_2{position: relative;left: 20px;top:30px;background: red;}
</style>
</head>
<body><div id="div_1">我是一个黑框框</div>
<div id="div_2"> 我是一个红框框</div></body>
</html>
absolute 绝对定位
没有已定位的祖先元素，absolute 相对于浏览器页面 进行定位
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>
/* 相同的样式可以写一起，不要重复操作*/
#div_1,#div_2 { width: 20px;height: 20px;border: 1px solid ;color: white;font-size: 5px;}#div_1{background: black;}#div_2{position: absolute;left: 20px;top:0px;background: red;}
</style>
</head>
<body><div id="div_1">我是一个黑框框</div>
<div id="div_2"> 我是一个红框框</div></body>
</html> 
定位祖先元素进行定位。div_1 已经做 position: absolute，且是 div_1 包含了 div_2 ，所以 div_1就是已经定位的祖先元素
<style>
#div_1{position: absolute;top:10px;background: black;}#div_2{position: absolute;left: 20px;top:10px;background: red;}
</style>
</head>
<body><div id="div_1"> <div id="div_2"> 我是一个红框框</div>
</div>
fixed 固定定位
fixed 是相对于浏览器窗口进行定位的。无论页面如何滚动，页面都不会挪动位置
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.nav {width: 100%;height: 25 px;background-color: blue;color: white;position: fixed;top: 0;left: 0; }
</style>
</head>
<body><div class="nav">我动不了了导航栏</div>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
</body>
</html>
sticky 粘性定位
元素刚开始就按文档正常一样显示，但是当页面滚动到指定位置的时候，它就会固定住。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>.nav {width: 100%;height: 25 px;background-color: blue;color: white;position: sticky;top: 50px;}
</style>
</head>
<body>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<div class="nav">我是导航栏</div>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
<p>页面内容。。。。。。</p>
</body>
</html>
当页面下拉的时候，就会停留在离顶部 50 像素的位置
相关文章：
【CSS】HTML页面定位CSS - position 属性 relative 、absolute、fixed 、sticky
目录 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 position：relative 、absolute、fixed 、sticky （四选一） top：距离上面的像素 bottom：距离底部的像素 left：距离左边的像素…...
spark汇总
目录 描述运行模式1. Windows模式代码示例 2. Local模式3. Standalone模式 RDD描述特性RDD创建代码示例（并行化创建）代码示例（读取外部数据）代码示例（读取目录下的所有文件） 算子DAGSparkSQLSparkStreaming…...
【Rust自学】11.5. 在测试中使用Result＜T, E＞
喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 11.5.1. 测试函数返回值为Result枚举 到目前为止，测试运行失败的原因都是因为触发了panic，但可以导致测试失败的…...
Sping Boot教程之五十四：Spring Boot Kafka 生产者示例
Spring Boot Kafka 生产者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架，使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序，您可…...
设计模式-结构型-组合模式
1. 什么是组合模式？ 组合模式（Composite Pattern） 是一种结构型设计模式，它允许将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端对单个对象和组合对象的使用具有一致性。换句话说，组合模式允…...
基于Java的推箱子游戏设计与实现
基于Java的推箱子游戏设计与实现 摘 要 社会在进步，人们生活质量也在日益提高。高强度的压力也接踵而来。社会中急需出现新的有效方式来缓解人们的压力。此次设计符合了社会需求，Java推箱子游戏可以让人们在闲暇之余，体验游戏的乐趣。具有…...
Spark vs Flink分布式数据处理框架的全面对比与应用场景解析
1. 引言 1.1 什么是分布式数据处理框架 随着数据量的快速增长，传统的单机处理方式已经无法满足现代数据处理需求。分布式数据处理框架应运而生，它通过将数据分片分布到多台服务器上并行处理，提高了任务的处理速度和效率。 分布式数据处理框…...
python_excel列表单元格字符合并、填充、复制操作
读取指定sheet页，根据规则合并指定列，填充特定字符，删除多余的列，每行复制四次，最后写入新的文件中。 import pandas as pd""" 读取指定sheet页，根据规则合并指定列，填充特定字…...
nums[:]数组切片
问题：给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。 使用代码如下没有办法通过测试示例，必须将最后一行代码改成 nums[:]nums[-k:]nums[:-k]切片形式： 原因：列表的切片操作 …...
【Arthas 】Can not find Arthas under local: /root/.arthas/lib 解决办法
报错 [INFO] JAVA_HOME: /opt/java/openjdk [INFO] arthas-boot version: 4.0.4 [INFO] Found existing java process, please choose one and input the serial number of the process, eg : 1. Then hit ENTER. [1]: 12 org.springframework.boot.loader.JarLauncher 1 [ER…...
录用率23%！CCF推荐-B类，Early Access即可被SCI数据库收录，中美作者占比过半
International Journal of Human-Computer Interaction（IJHCI）创刊于1989年，由泰勒-弗朗西斯（Taylor & Francis, Inc.）出版，主要发表关于交互式计算（认知和人体工程学）、数字无障…...
IP 地址与蜜罐技术
基于IP的地址的蜜罐技术是一种主动防御策略，它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意，将恶意者引导到预先布置好的伪装的目标之中。 如何实现蜜罐技术 当恶意攻击者在网络中四处扫描，寻找可入侵的目标时&…...
Vue_API文档
Vue API风格 Vue 的组件可以按两种不同的风格书写：选项式 API（Vue2） 和组合式 API（Vue3） 大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格 选项式API(Opt…...
WebSocket 设计思路
WebSocket 设计思路 1. 核心结构体 1.1 Manager (管理器) // Manager 负责管理所有WebSocket连接 type Manager struct {clients sync.Map // 存储所有客户端连接broadcast chan []byte // 广播消息通道messages chan Message // 消息处理通道config *config.WebSo…...
Jenkins持续集成与交付安装配置
Jenkins 是一款开源的持续集成（CI）和持续交付（CD）工具，它主要用于自动化软件的构建、测试和部署流程。为项目持续集成与交付功能强大的应用。下面我们来介绍下它的安装与配置。 环境准备 更新系统组件（这…...
ESP32作为Wi-Fi AP模式的测试
一、AP模式的流程 初始化阶段 (Init Phase): 1.1: Main task（主任务）初始化LwIP（轻量级TCP/IP协议栈）。 ESP_ERROR_CHECK(esp_netif_init()); 1.2: 创建和初始化Event task（事件任务）。 ESP_ERROR_CHECK…...
【爬虫】单个网站链接爬取文献数据:标题、摘要、作者等信息
源码链接： https://github.com/Niceeggplant/Single—Site-Crawler.git 一、项目概述 从指定网页中提取文章关键信息的工具。通过输入文章的 URL，程序将自动抓取网页内容 二、技术选型与原理 requests 库：这是 Python 中用于发送 HTTP 请求…...
Android RIL（Radio Interface Layer）全面概述和知识要点（3万字长文）
在Android面试时，懂得越多越深android framework的知识，越为自己加分。 目录 第一章：RIL 概述 1.1 RIL 的定义与作用 1.2 RIL 的发展历程 1.3 RIL 与 Android 系统的关系 第二章：RIL 的架构与工作原理 2.1 RIL 的架构组成 2.2 RIL 的工作原理 2.3 RIL 的接口与协议…...
leetcode_2816. 翻倍以链表形式表示的数字
2816. 翻倍以链表形式表示的数字 - 力扣（LeetCode） 搜先看到这个题目 链表的节点那么多 已经远超longlong能够表示的范围 那么暴力解题 肯定是不可以的了 我们可以想到 乘法运算中 就是从低位到高位进行计算 刚开始 我想先反转链表 然后在计算 然后在进…...
【论文阅读】MAMBA系列学习
Mamba code：state-spaces/mamba: Mamba SSM architecture paper：https://arxiv.org/abs/2312.00752 背景 研究问题：如何在保持线性时间复杂度的同时，提升序列建模的性能，特别是在处理长序列和密集数据（如…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。 今天是六一儿童节，小蓝老师为了让大家在节…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域，MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步，这两种通讯协议也正在被逐步融合，形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序，以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务，提供稳定高效的数据处理与业务逻辑支持；利用 uniapp 实现跨平台前…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...
uniapp 实现腾讯云IM群文件上传下载功能
UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中，群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS，在uniapp中实现： 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...