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

HTML + CSS 核心知识点- 定位

news 2026/6/1 15:35:18

简述：

补充固定定位也会脱离文档流、不会占据原先位置

1、什么是文档流

        文档流是指HTML文档中元素排列的规律和顺序。在网页中，元素按照其在HTML文档中出现的顺序依次排列，这种排列方式被称为文档流。文档流决定了元素在页面上的位置和互相之间的关系。

2、具体代码和效果

（1）未设置定位前

代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position 示例</title>
<style>.container {width: 500px;margin: 50px auto;border: 1px solid black;position: relative;}.sticky-box {width: 100px;height: 100px;background-color: purple;}.absolute-box {width: 100px;height: 100px;background-color: blue;}.relative-box {width: 100px;height: 100px;background-color: green;}.static-box {width: 100px;height: 100px;background-color: gray;}.fixed-box {width: 100px;height: 100px;background-color: orange;}.spacer {height: 1000px;}
</style>
</head>
<body>
<div class="container"><div class="sticky-box">Sticky</div><div class="static-box">Static</div><div class="relative-box">Relative</div><div class="absolute-box">Absolute</div><div class="fixed-box">Fixed</div>
</div>
<div class="spacer"></div>
</body>
</html>
效果

效果说明

基于文档正常流显示

（2）给static-box设置静态定位(static)，并给left和top值后

代码
.static-box {width: 100px;height: 100px;background-color: gray;position: static;left: 1000px;top: 1000px;}
效果

效果说明

基于文档正常流显示、无任何变化

（3）给relative-box设置相对定位(relative)，并给left和top值后

代码
.relative-box {width: 100px;height: 100px;background-color: green;position: relative;left: 100px;top: 100px;}
效果

效果说明

元素会保持原本占据空间、并基于自身进行偏移。

（4）给absolute-box设置绝对定位(absolute)，并给left和top值后

代码
.relative-box {width: 100px;height: 100px;background-color: green;position: relative;left: 100px;top: 100px;}
效果

效果说明

脱离了文档流、并未占原先位置、并基于最近的非static的父元素盒子偏移。

（5）给fixed-box设置绝对定位(fixed)，并给left和top值后

代码
.fixed-box {width: 100px;height: 100px;background-color: orange;position: fixed;top: 100px;left: 100px;}
效果

效果说明

脱离了文档流、并未占原先位置、并基于视窗偏移。

（6）给父容器盒子加上滚动条、sticky-box设置绝对定位(sticky)，并给left和top值后

代码
.container {width: 500px;height: 500px;margin: 100px auto;border: 1px solid black;position: relative;overflow: scroll;}.sticky-box {width: 100px;height: 200px;background-color: purple;position: sticky;left: 100px;top: 100px;}
<div class="container"><div class="sc" style="height: 300px;"></div><div class="sticky-box">Sticky</div><div class="static-box">Static</div><div class="relative-box">Relative</div><div class="absolute-box">Absolute</div><div class="fixed-box">Fixed</div><div class="sc" style="height: 1000px;"></div>
</div>
效果
未滑动前

效果说明

此时盒子为相对定位

效果
滚动条向下滑动后、但是盒子距离父盒子顶部大于200px

效果说明

此时盒子也会向上滑动、盒子依旧为相对定位

效果
滚动条向下滑动后、盒子距离父盒子顶部小于或等于200px

效果说明

此时盒子会具体在距离顶部200px的位置、盒子为绝对定位

3、和定位的知识有关考查题与回答

  1. 什么是 CSS 定位？

    回答：在 CSS 中，定位是一种用来控制元素在页面中位置的方式。通过设置 position 属性，可以将元素相对于文档流或特定父级元素进行定位。

  2. 请解释 CSS 中的 position 属性有哪些值，它们分别代表什么？

    回答：
    • sticky：在特定条件下表现为相对定位和固定定位的混合效果。
    • fixed：相对于视窗定位，元素固定在页面上某个位置，不随滚动而移动。
    • absolute：相对于最近的非 static 定位父元素进行定位，如果没有，则相对于文档流。
    • relative：相对于元素自身原本位置进行偏移，但仍占据原本空间。
    • static：默认属性，元素遵循正常文档流。

  3. 如何让一个元素水平垂直居中显示？

    回答：可以使用多种方法实现，比如使用 Flexbox 布局或者 Grid 布局，也可以结合使用绝对定位和 transform 属性来实现。

  4. 什么是堆叠上下文（stacking context）？

    回答：堆叠上下文是指在 HTML 元素在垂直方向上重叠时的一个概念，它定义了元素如何在垂直方向上叠加显示。元素的堆叠顺序由其堆叠上下文和 z-index 属性决定。

  5. 如何创建一个元素的堆叠上下文？

    回答：可以通过设置元素的 position 属性为 relative、absolute、fixed 或 sticky，或者设置 opacity 属性不为 1、transform 属性不为 none、filter 属性不为 none 等方式来创建堆叠上下文。

  6. 什么是浮动（float）？它与定位有何区别？

    回答：浮动是一种布局方式，使元素脱离文档流向左或向右浮动。与定位不同，浮动元素仍占据文档流中的位置，而定位可以使元素完全脱离文档流并定位到指定位置。

  7. 在什么情况下会出现定位偏移量（offset）失效的情况？

    回答：定位偏移量（offset）失效通常发生在相对定位元素的父级元素也设置了定位属性且定位值不为 static 的情况下。这时子元素的偏移量是相对于父级定位元素的位置而非文档流。

  8. 如何实现一个元素在页面滚动时固定在顶部？

    回答：可以通过给元素设置 position: fixed; top: 0; 来实现元素在页面滚动时固定在顶部。

  9. z-index 属性的作用是什么？如何影响元素的堆叠顺序？

    回答：z-index 属性用于控制元素在堆叠上下文中的堆叠顺序。具有较高 z-index 值的元素会覆盖具有较低 z-index 值的元素。

  10. 如何实现一个元素相对于视口垂直居中显示？

    回答：可以给元素设置 position: fixed; top: 50%; transform: translateY(-50%); 来实现元素相对于视口垂直居中显示。

相关文章：

HTML + CSS 核心知识点- 定位

简述&#xff1a; 补充固定定位也会脱离文档流、不会占据原先位置 1、什么是文档流 文档流是指HTML文档中元素排列的规律和顺序。在网页中&#xff0c;元素按照其在HTML文档中出现的顺序依次排列&#xff0c;这种排列方式被称为文档流。文档流决定了元素在页面上的位置和互相之…...

编程日记 2024/3/22 2:44:52

Spring MVC（二）-过滤器与拦截器

过滤器和拦截器在职责和使用场景上存在一些差异。 过滤器 拦截器 作用 对请求进行预处理和后处理。例如过滤请求参数、设置字符编码。 拦截用户请求并进行相应处理。例如权限验证、用户登陆检查等。 工作级别 Servlet容器级别&#xff0c;是Tomcat服务器创建的对象。可以…...

编程日记 2024/3/22 2:43:51

python vtk读取vtk文件

参考&#xff1a; https://cloud.tencent.com/developer/ask/sof/101993637 方法一&#xff1a;使用pyvtk 要使用Python读取VTK文件&#xff0c;可以使用pyvtk库。首先&#xff0c;确保已经安装了pyvtk。如果没有安装&#xff0c;可以通过pip安装&#xff1a; csharp pip ins…...

编程日记 2024/3/22 2:41:48

LeetCode 2671.频率跟踪器：俩计数哈希表

【LetMeFly】2671.频率跟踪器&#xff1a;俩计数哈希表 力扣题目链接&#xff1a;https://leetcode.cn/problems/frequency-tracker/ 请你设计并实现一个能够对其中的值进行跟踪的数据结构&#xff0c;并支持对频率相关查询进行应答。 实现 FrequencyTracker 类&#xff1a;…...

编程日记 2024/3/22 2:40:47

NAT笔记

NAT 用于实现内网和外网之间的互访。 静态NAT 静态NAT实现内网地址和外网地址的一对一转换。 有2种配置方法&#xff1a; 全局模式下设置静态NAT [R1]nat static global 172.10.10.10 inside 192.168.10.10 [R1]int g0/0/1 #外网接口 [R1-GigabitEthernet0/0/1]nat static…...

编程日记 2024/3/22 2:36:43

MySQL 数据库的备份和还原

1.命令行 备份语法 mysqldump -u用户名 -p密码 数据库名称 > 保存的路径还原语法 1.登陆数据库 2.创建数据库 3.使用数据库 4.执行文件 source 文件路径2.图形化(太简单了不写了) 点击返回 MySQL 快速学习目录...

编程日记 2024/3/22 2:33:40

初识CSS样式 与 文本背景样式

目录 前言: 1.什么是CSS: 2.关于css的主要特性: 2.1层叠性&#xff1a; 2.2继承性&#xff1a; 2.3优先级&#xff1a; 2.4.CSS的组成结构: 3.css样式的三种写法: 3.1内联样式&#xff1a; 3.1.2存在的优点和缺点: 3.2内部样式表&#xff1a; 3.2.2存在的优点和缺点:…...

编程日记 2024/3/22 2:31:38

JSR380验证框架

依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency>demo Size(min10,max200 ,message"描述需要控制在10到200字符"&#xff09; Min(valu…...

编程日记 2024/3/22 2:28:36

百度paddleocr GPU版部署

显卡&#xff1a;NVIDIA GeForce RTX 4070&#xff0c;Nvidia驱动程序版本&#xff1a;537.13 Nvidia驱动程序能支持的最高cuda版本&#xff1a;12.2.138 Python&#xff1a;python3.10.11。试过python3.12&#xff0c;安装paddleocr失败&#xff0c;找不到相关模块。 飞桨版本…...

编程日记 2024/3/22 2:25:33

node.js 常用命令

Node.js的常用命令包括多种类型&#xff0c;从运行JavaScript文件到管理Node.js的模块和包。以下是一些主要的Node.js常用命令&#xff1a; 运行JavaScript文件&#xff1a; node filename.js 这个命令会调用Node.js程序来运行指定的JavaScript文件。 查看文件和目录&#xf…...

编程日记 2024/3/22 2:24:31

Easypoi实现导出Excel（简单高效）

今天做报表导出&#xff0c;网上找了很多导出的方法&#xff0c;最后总结发现以下方法是最简便&#xff0c;更易维护的导出方法&#xff0c;下面来分享给大家。 1、首先引入相关依赖 <!--EasyPoi 报表--><dependency><groupId>cn.afterturn</groupId>…...

编程日记 2024/3/22 2:22:30

python之pathlib库使用介绍

pathlib 是 Python 标准库中用于处理文件路径的模块。它提供了一种面向对象的方式来操作文件和目录路径&#xff0c;简化了路径操作的编码和跨平台的兼容性。下面是 pathlib 库的基本介绍和使用方法&#xff1a; 1.导入 pathlib 模块 from pathlib import Path 2.创建路径对…...

编程日记 2024/3/22 2:21:29

Java：设计模式

文章目录 参考简介工厂模式简单工厂模式工厂方法模式抽象工厂模式总结 单例模式预加载懒加载线程安全问题 策略模式 参考 知乎 简介 总体来说设计模式分为三类共23种。 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模…...

编程日记 2024/3/22 2:18:26

【链表】Leetcode 19. 删除链表的倒数第 N 个结点【中等】

删除链表的倒数第 N 个结点 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 解题思路 1、使用快慢指针找到要删除节点的前一个节点。2、删…...

编程日记 2024/3/22 2:16:24

亚马逊认证考试系列 - 知识点 - 安全组简介

AWS安全组是一种虚拟防火墙&#xff0c;用于控制实例进出网络流量。安全组是一个实例级别的防火墙&#xff0c;可以定义哪些流量可以进入或离开特定的EC2实例。 功能&#xff1a;安全组可以用于限制特定类型的流量&#xff0c;如HTTP或SSH&#xff0c;允许特定IP地址范围的流量…...

编程日记 2024/3/22 2:15:23

同向双指针合集（力扣）

283. 移动零 代码 class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size();int l 0, r 0;while(r < n){if(nums[r]){swap(nums[l],nums[r]);l;}r;}} };209. 长度最小的子数组 代码 class Solution { public:int minSubArrayLen(i…...

编程日记 2024/3/22 2:14:22

G - Find a way

题目分析 1.双重bfs,遍历两个起点求最短路再计算总和即可 2.唯一的坑点在于对于一个KFC&#xff0c;两人中可能有一个到不了&#xff0c;所以还要对到不了的点距离做处理 #include <bits/stdc.h> using namespace std; using ll long long; const int N 220;struct pos…...

编程日记 2024/3/22 2:12:20

AJAX 02 案例、Bootstrap框架

AJAX 学习 AJAX 2 综合案例黑马 API01 图书管理Bootstrap 官网Bootstrap 弹框图书管理-渲染列表图书管理-添加图书图书管理-删除图书图书管理 - 编辑图书 02 图片上传03 更换图片04 个人信息设置信息渲染头像修改补充知识点&#xff1a;label扩大表单的范围 AJAX 2 综合案例 黑…...

编程日记 2024/3/22 2:11:17

SinoDB客户端工具dbaccess

类似Oracle的客户端工具sqlplus&#xff0c;Mysql的客户端工具mysql&#xff0c;SinoDB数据库也有自带的命令行客户端工具dbaccess。 dbaccess 识别用户输入&#xff0c;将用户输入的 SQL 语句打包发送给 SinoDB 数据库服务器执行&#xff0c;然后接收服务器的执行结果&#xf…...

编程日记 2024/3/22 2:09:16

postman学习

一、如何学习postman工具 1、下载和安装 Postman&#xff1a; 首先&#xff0c;从 Postman 官方网站&#xff08;https://www.postman.com&#xff09;下载并安装 Postman 应用程序。 2、了解基本概念&#xff1a; 在开始学习之前&#xff0c;了解一些基本概念&#xff0c;…...

编程日记 2024/3/22 2:07:14

CentOS 7下‘Development Tools’和‘开发工具’组有区别吗？实测告诉你答案

CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联&#xff1a;技术细节全解析在Linux系统管理中&#xff0c;yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时&#xff0c;开发者们常常会遇到一个有趣的现象&#x…...

编程新知 2026/5/26 3:38:09

服务器日志分析实战：用Python追踪HTTP 404错误并可视化异常频率

作为一名爬虫开发者或网站运维人员，服务器日志就像飞机的“黑匣子”——它记录了每个请求的来龙去脉。而404错误（页面未找到）尤其值得关注：它可能是用户输错了网址，可能是你爬虫的URL构造逻辑有漏洞，也可能是网站改版后旧的链接失效了。更严重的是，大量突然涌出的404请求…...

编程新知 2026/5/26 1:53:13

警惕！AI正在悄悄重构全球攻防格局

警惕&#xff01;AI 正在悄悄重构全球攻防格局 热点聚焦 AI重构网络安全&#xff1a;全球巨头加速布局 2026年5月&#xff0c;全球网络安全领域迎来重大变革&#xff0c;AI技术正在重塑攻防格局。OpenAI发布专为网络安全防御打造的集成化AI平台Daybreak&#xff0c;将安全防…...

编程新知 2026/5/26 0:48:33

上线前最后一道防线，DeepSeek代码审查如何帮你拦截87%的CVE类缺陷？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;上线前最后一道防线&#xff0c;DeepSeek代码审查如何帮你拦截87%的CVE类缺陷&#xff1f; 在软件交付生命周期末期&#xff0c;传统人工代码审计与通用SAST工具常因误报率高、上下文理解弱而漏检高危漏…...

编程新知 2026/5/26 0:05:57

三步让小爱音箱秒变AI语音助手：MiGPT深度配置指南

三步让小爱音箱秒变AI语音助手&#xff1a;MiGPT深度配置指南 【免费下载链接】mi-gpt &#x1f3e0; 将小爱音箱接入 ChatGPT 和豆包&#xff0c;改造成你的专属语音助手。 项目地址: https://gitcode.com/GitHub_Trending/mi/mi-gpt 还在为小爱音箱的"人工智障&q…...

编程新知 2026/5/25 20:16:01

ArduPilot飞行模式实战：从代码角度看Stabilize、Acro、Loiter模式如何切换（附避坑指南）

ArduPilot飞行模式深度解析&#xff1a;从状态机到实战避坑指南 在开源飞控领域&#xff0c;ArduPilot以其强大的飞行模式系统著称。不同于普通用户只需了解模式功能&#xff0c;开发者更需要掌握模式切换的底层机制——这直接关系到飞行安全与二次开发效率。本文将带您深入Sta…...

编程新知 2026/5/25 17:50:38

Python strip 与 rstrip 函数区别

Python strip 与 rstrip 函数区别 文章目录Python strip 与 rstrip 函数区别一、核心作用二、基础语法三、基础使用示例四、指定删除特定字符五、常用业务场景一、核心作用 函数作用范围strip()移除字符串首尾空白字符rstrip()仅移除字符串右侧末尾字符&#xff0c;左侧保持不…...

编程新知 2026/5/26 21:18:30

独立开发者利用taotoken模型广场为不同任务选择性价比最优模型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 独立开发者利用taotoken模型广场为不同任务选择性价比最优模型 对于独立开发者而言&#xff0c;在有限的预算内高效完成多样化的开…...

编程新知 2026/5/25 17:26:09

终极崩坏星穹铁道自动化指南：3分钟掌握解放双手的智能游戏伴侣

终极崩坏星穹铁道自动化指南&#xff1a;3分钟掌握解放双手的智能游戏伴侣 【免费下载链接】StarRailAssistant 崩坏&#xff1a;星穹铁道自动化 | 崩坏&#xff1a;星穹铁道自动锄大地 | 崩坏&#xff1a;星穹铁道锄大地 | 自动锄大地 | 基于模拟按键 项目地址: https://git…...

编程新知 2026/5/25 16:32:03

终极指南：用AlwaysOnTop免费开源工具彻底改变你的Windows工作方式

终极指南&#xff1a;用AlwaysOnTop免费开源工具彻底改变你的Windows工作方式 【免费下载链接】AlwaysOnTop Make a Windows application always run on top 项目地址: https://gitcode.com/gh_mirrors/al/AlwaysOnTop 你是否经常在多个窗口间来回切换&#xff0c;浪费宝…...

编程新知 2026/5/25 16:15:26