当前位置：首页 > news >正文

【CSS】HTML页面定位CSS - position 属性 relative 、absolute、fixed 、sticky

news 文章来源：https://blog.csdn.net/xudahai513/article/details/145061557 2025/2/7 15:05:49

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：距离左边的像素…...

编程日记 2025/1/13 1:44:14

spark汇总

目录描述运行模式1. Windows模式代码示例 2. Local模式3. Standalone模式 RDD描述特性RDD创建代码示例（并行化创建）代码示例（读取外部数据）代码示例（读取目录下的所有文件） 算子DAGSparkSQLSparkStreaming…...

编程日记 2025/1/13 1:42:09

【Rust自学】11.5. 在测试中使用Result＜T, E＞

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 11.5.1. 测试函数返回值为Result枚举到目前为止，测试运行失败的原因都是因为触发了panic，但可以导致测试失败的…...

编程日记 2025/1/13 1:40:08

Sping Boot教程之五十四：Spring Boot Kafka 生产者示例

Spring Boot Kafka 生产者示例 Spring Boot 是 Java 编程语言中最流行和使用最多的框架之一。它是一个基于微服务的框架，使用 Spring Boot 制作生产就绪的应用程序只需很少的时间。Spring Boot 可以轻松创建独立的、生产级的基于 Spring 的应用程序，您可…...

编程日记 2025/1/13 1:31:57

设计模式-结构型-组合模式

1. 什么是组合模式？ 组合模式（Composite Pattern） 是一种结构型设计模式，它允许将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端对单个对象和组合对象的使用具有一致性。换句话说，组合模式允…...

编程日记 2025/1/13 1:27:53

基于Java的推箱子游戏设计与实现

基于Java的推箱子游戏设计与实现摘要社会在进步，人们生活质量也在日益提高。高强度的压力也接踵而来。社会中急需出现新的有效方式来缓解人们的压力。此次设计符合了社会需求，Java推箱子游戏可以让人们在闲暇之余，体验游戏的乐趣。具有…...

编程日记 2025/1/13 1:23:49

Spark vs Flink分布式数据处理框架的全面对比与应用场景解析

1. 引言 1.1 什么是分布式数据处理框架随着数据量的快速增长，传统的单机处理方式已经无法满足现代数据处理需求。分布式数据处理框架应运而生，它通过将数据分片分布到多台服务器上并行处理，提高了任务的处理速度和效率。分布式数据处理框…...

编程日记 2025/1/13 1:19:46

python_excel列表单元格字符合并、填充、复制操作

读取指定sheet页，根据规则合并指定列，填充特定字符，删除多余的列，每行复制四次，最后写入新的文件中。 import pandas as pd""" 读取指定sheet页，根据规则合并指定列，填充特定字…...

编程日记 2025/1/13 1:18:44

nums[:]数组切片

问题：给定一个整数数组 nums，将数组中的元素向右轮转 k 个位置，其中 k 是非负数。使用代码如下没有办法通过测试示例，必须将最后一行代码改成 nums[:]nums[-k:]nums[:-k]切片形式： 原因：列表的切片操作 …...

编程日记 2025/1/13 1:17:41

【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…...

编程日记 2025/1/13 1:11:36

录用率23%！CCF推荐-B类，Early Access即可被SCI数据库收录，中美作者占比过半

International Journal of Human-Computer Interaction（IJHCI）创刊于1989年，由泰勒-弗朗西斯（Taylor & Francis, Inc.）出版，主要发表关于交互式计算（认知和人体工程学）、数字无障…...

编程日记 2025/1/13 1:09:31

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略，它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意，将恶意者引导到预先布置好的伪装的目标之中。如何实现蜜罐技术当恶意攻击者在网络中四处扫描，寻找可入侵的目标时&…...

编程日记 2025/1/13 1:08:29

Vue_API文档

Vue API风格 Vue 的组件可以按两种不同的风格书写：选项式 API（Vue2） 和组合式 API（Vue3） 大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格选项式API(Opt…...

编程日记 2025/1/13 1:06:27

WebSocket 设计思路

WebSocket 设计思路 1. 核心结构体 1.1 Manager (管理器) // Manager 负责管理所有WebSocket连接 type Manager struct {clients sync.Map // 存储所有客户端连接broadcast chan []byte // 广播消息通道messages chan Message // 消息处理通道config *config.WebSo…...

编程日记 2025/1/13 1:03:24

Jenkins持续集成与交付安装配置

Jenkins 是一款开源的持续集成（CI）和持续交付（CD）工具，它主要用于自动化软件的构建、测试和部署流程。为项目持续集成与交付功能强大的应用。下面我们来介绍下它的安装与配置。环境准备更新系统组件（这…...

编程日记 2025/1/13 0:59:19

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…...

编程日记 2025/1/13 0:56:16

【爬虫】单个网站链接爬取文献数据:标题、摘要、作者等信息

源码链接： https://github.com/Niceeggplant/Single—Site-Crawler.git 一、项目概述从指定网页中提取文章关键信息的工具。通过输入文章的 URL，程序将自动抓取网页内容二、技术选型与原理 requests 库：这是 Python 中用于发送 HTTP 请求…...

编程日记 2025/1/13 0:53:11

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 的接口与协议…...

编程日记 2025/1/13 0:52:08

leetcode_2816. 翻倍以链表形式表示的数字

2816. 翻倍以链表形式表示的数字 - 力扣（LeetCode） 搜先看到这个题目链表的节点那么多已经远超longlong能够表示的范围那么暴力解题肯定是不可以的了我们可以想到乘法运算中就是从低位到高位进行计算刚开始我想先反转链表然后在计算然后在进…...

编程日记 2025/1/13 0:49:05

【论文阅读】MAMBA系列学习

Mamba code：state-spaces/mamba: Mamba SSM architecture paper：https://arxiv.org/abs/2312.00752 背景研究问题：如何在保持线性时间复杂度的同时，提升序列建模的性能，特别是在处理长序列和密集数据（如…...

编程日记 2025/1/13 0:45:01

MySQL教程之：批量使用mysql

在前几节中，您以交互方式使用mysql输入语句并查看结果。您也可以运行mysql批量模式。为此，请将要运行的语句放在文件中，然后告诉mysql从文件中读取其输入： $> mysql < batch-file 如果您在Windows下运行mysql，…...

编程日记 2025/1/13 0:44:00

17_Redis管道技术

Redis管道（Pipeline）技术是一种在 Redis 客户端与服务器之间进行高效数据交互的技术。 1.Redis管道技术介绍 1.1 传统请求响应模式在传统的请求-响应模式下，客户端每发送一个命令后会等待服务器返回结果，然后再发送下一个命令。这种方式在网络延迟较高的情况下会导致性…...

编程日记 2025/1/13 0:38:54

【LC】3270. 求出数字答案

题目描述： 给你三个正整数 num1 ，num2 和 num3 。数字 num1 ，num2 和 num3 的数字答案 key 是一个四位数，定义如下： 一开始，如果有数字少于四位数，给它补前导 0 。答案 key 的第 i 个数…...

编程日记 2025/1/13 0:37:53

【redis】ubuntu18安装redis7

在Ubuntu 18下安装Redis7可以通过以下两种方法实现：手动编译安装和使用APT进行安装。 Ubuntu 18系统的环境和版本： $ cat /proc/version Linux version 4.15.0-213-generic (builddlcy02-amd64-079) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)…...

编程日记 2025/1/13 0:35:50

d2j-dex2jar classes.dex 执行报错：not support version 问题解决

这个错误是由于 dex2jar 工具不支持你的 classes.dex 文件的版本导致的。通常情况下，这是因为你尝试使用的 dex2jar 版本不支持 Android 较新的 DEX 文件格式（例如 DEX 格式 038 或更新版本）。解决方法以下是一些解决此问题的步骤&#x…...

编程日记 2025/1/13 0:33:47

智慧城市应急指挥中心系统平台建设方案

建设背景与目标智慧城市应急指挥中心系统平台的建设，源于对城市管理精细化、智能化的迫切需求。平台旨在通过整合各方资源，实现应急事件的快速响应与高效处置，提升城市安全管理水平。前端设计与信息采集前端设计注重立体化、全方位信息…...

编程日记 2025/1/13 0:31:45

QT鼠标、键盘事件

一、鼠标鼠标点击 mousePressEvent 鼠标释放 mouseReleaseEvent 鼠标移动 mouseMoveEvent 鼠标双击 mouseDoubleClickEvent 鼠标滚轮 QWheelEvent 二、键盘键盘按下 keyPressEvent 键盘松开keyReleaseEvent 一、鼠标 #include <QMouseEvent> 鼠标点击 mouse…...

编程日记 2025/1/13 0:30:44

Ceph分布式存储集群，不仅仅是一个简单的对象存储解决方案

Ceph 作为 OpenStack 的存储后端块存储（Cinder 后端） Ceph 的 RBD（RADOS Block Device）模块作为 OpenStack Cinder 服务的后端，为虚拟机提供块级别的存储资源。RBD 支持快照、克隆和恢复等功能，能够满足虚…...

编程日记 2025/1/13 0:16:29

DSP+Simulink——点亮LED灯(TMSDSP28379D)超详细

实现功能：DSP28379D-LED灯闪烁 :matlab为2019a :环境建立见之前文章 Matlab2019a安装C2000 Processors超详细过程 matlab官网链接： Getting Started with Embedded Coder Support Package for Texas Instruments C2000 Processors Overview of Creat…...

编程日记 2025/1/13 0:15:28

Linux 环境下编译安装 OpenCV 4.8.x

在 Linux 环境下编译安装 OpenCV 4.8.x 需要安装一系列依赖库。以下是详细的步骤说明，并附上每个依赖库的作用解释。 1. 环境准备操作系统推荐使用 Ubuntu 20.04/22.04 或其他基于 Debian 的 Linux 发行版。编译器 GCC 9 或更高版本（默认已安装&a…...

编程日记 2025/1/13 0:14:26

马鞍山网站建设兼职/什么网站做推广比较好

题目描述神犇YY虐完数论后给傻kAc出了一题给定N, M,求1<x<N, 1<y<M且gcd(x, y)为质数的(x, y)有多少对 kAc这种傻必然不会了，于是向你来请教…… 多组输入输入输出格式输入格式： 第一行一个整数T 表述数据组数接下来T行，每行…...

编程日记 2025/2/7 12:04:59

网站建设要注意/网络营销和网络推广

上一篇讲到游戏运作的原理是非常简单的，实现一个五子棋很可能只需要使用操作系统提供的原生开发环境，简单的做一些代码实现即可完成，我自己在大学的时候就找到了一个一步一步教你使用Windows API开发一个五子棋游戏的教程，需要用到的也只需要安装一个visual studio顺便安装…...

编程日记 2025/2/7 11:48:38

58同城网站建设推广/网站建设网站推广

PO VO DTO 1. MapStruct简介2.0 MapStruct入门2.0.1 简易demo2.1. 引入依赖2.2. 需要转换的对象2.3. 创建转换器2.4. 验证2.5. 自动生成的实现类3.0 MapStruct进阶4.0 扩展（网上项目参考）4.1 扩展 dozer使用5.0 本地测试DEMO加深理解DEMO2：实…...

编程日记 2025/2/7 10:51:12

wordpress安装后后台无css/南宁网站关键词推广

在开始之前先了解下js数据类型 js基本数据类型： null undefined number boolean string js引用数据类型： function object array 一说instanceof 就想到typeof ，这里也介绍下typeof: typeof是用来判断数据类型的，就一个参数 ,使用…...

编程日记 2025/2/7 10:42:04

哈尔滨做网站电话/小时seo

2019独角兽企业重金招聘Python工程师标准>>> SAP HANA SPS 08新特性资料汇总 HANA(High-Performance Analytic Appliance)高性能分析设备。那么SAP HANA SPS 08针对07版本又有哪些改进呢？本文集将为大家汇总和持续更新这一系列的资料。详细解读和小伙伴…...

编程日记 2025/2/7 9:20:30

青岛网站建设最便宜/广告联盟推广

了解如何使您的 Flutter 应用程序可靠且错误最少，并通过提高代码效率来减少重复调试。在本文中，我将描述在您的 Flutter 项目中实现测试驱动开发 (TDD) 的步骤，并介绍该主题的基本介绍。什么是 TDD？ TDD 或测试驱动开发是在实…...

编程日记 2025/2/7 9:08:19

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘性定位

相关文章：