【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 背景 研究问题:如何在保持线性时间复杂度的同时,提升序列建模的性能,特别是在处理长序列和密集数据(如…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
基于服务器使用 apt 安装、配置 Nginx
🧾 一、查看可安装的 Nginx 版本 首先,你可以运行以下命令查看可用版本: apt-cache madison nginx-core输出示例: nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
srs linux
下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935,SRS管理页面端口是8080,可…...
PL0语法,分析器实现!
简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
Python Ovito统计金刚石结构数量
大家好,我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构,但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法,可以持续统计各步的金刚石结构,具体代码如下: from ovito…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
