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

HTML + CSS 核心知识点- 定位

news 2026/4/14 14:52:46

简述：

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

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

法律大模型落地难？SITS2026用4类判决文书微调+2层事实校验机制，准确率跃升至92.7%，详解架构设计与审计留痕

第一章&#xff1a;SITS2026案例&#xff1a;AIAgent法律助手开发 2026奇点智能技术大会(https://ml-summit.org) SITS2026&#xff08;Smart Intelligence Technology Summit 2026&#xff09;中&#xff0c;AIAgent法律助手作为核心开源项目亮相&#xff0c;聚焦于中国司法…...

编程新知 2026/4/14 13:28:08

Markdown Viewer：浏览器中的Markdown全能阅读器，让技术文档焕然一新

Markdown Viewer&#xff1a;浏览器中的Markdown全能阅读器&#xff0c;让技术文档焕然一新 【免费下载链接】markdown-viewer Markdown Viewer / Browser Extension 项目地址: https://gitcode.com/gh_mirrors/ma/markdown-viewer 你是否曾经在浏览器中打开一个Markdow…...

编程新知 2026/4/14 12:26:52

语音指令分类模型训练（基于机器学习方法）

1、统计音频长度信息&#xff0c;便于后续参数的设定import os import librosa import numpy as np# 配置参数 DATA_PATH "data4c" # 数据集根目录 FIXED_SAMPLE_RATE 16000def stat_audio_lengths():# 存储所有音频的长度&#xff08;采样点数&#xff09;和时长…...

编程新知 2026/4/14 11:08:25

基于Gradle 7.6与Spring Boot 3.0构建现代化Java 17微服务架构

1. 为什么选择Gradle 7.6 Spring Boot 3.0 Java 17组合 最近两年Java生态发生了翻天覆地的变化。作为一个经历过多个微服务项目的老兵&#xff0c;我发现这套技术组合正在成为企业级开发的新标准。Gradle 7.6带来的构建速度提升&#xff0c;Spring Boot 3.0对云原生的深度支持…...

编程新知 2026/4/14 10:28:41

别再死记硬背四元数公式了！用Hamilton约定搞定IMU姿态更新（ROS/Eigen/Ceres都这么用）

四元数实战指南&#xff1a;用Hamilton约定统一ROS/Eigen/Ceres的姿态计算 第一次在ROS中实现IMU预积分时&#xff0c;我花了整整三天调试一个诡异的姿态漂移问题——明明理论推导完美&#xff0c;代码检查无误&#xff0c;但每次积分结果都与预期偏差越来越大。直到深夜比对Ei…...

编程新知 2026/4/14 10:06:32

【效果展示】SAM 3图像分割实测：精准识别分割，边界框一目了然

【效果展示】SAM 3图像分割实测&#xff1a;精准识别分割&#xff0c;边界框一目了然 1. 引言&#xff1a;当AI学会"指哪打哪" 想象一下这样的场景&#xff1a;你随手拍了一张街景照片&#xff0c;想快速找出画面中所有的汽车&#xff1b;或者你有一段监控视频&…...

编程新知 2026/4/14 9:22:03

将虚拟机变成服务器

背景&#xff1a;车载开发&#xff0c;缺少编译服务器&#xff0c;为避免每个人都安装虚拟机&#xff0c;想把我的虚拟机变成服务器&#xff0c;方便同事使用。1. 配置虚拟机端口转发2. 编译docker容器 2.1安装docker sudo apt install -y docker.io …...

编程新知 2026/4/14 9:17:56

用Python和CCXT库从零搭建一个数字货币量化交易机器人（附完整代码）

用Python和CCXT库从零搭建数字货币量化交易机器人 数字货币市场24小时不间断运行&#xff0c;价格波动剧烈&#xff0c;这为量化交易提供了天然土壤。与传统人工交易相比&#xff0c;量化交易能避免情绪干扰&#xff0c;严格执行策略&#xff0c;快速捕捉市场机会。本文将手把手…...

编程新知 2026/4/14 7:39:23

Pixel Couplet Gen 模型压缩与量化实践：在低显存GPU上的部署优化

Pixel Couplet Gen 模型压缩与量化实践&#xff1a;在低显存GPU上的部署优化 1. 轻量化部署的技术挑战与突破 在AI图像生成领域&#xff0c;Pixel Couplet Gen以其出色的生成质量广受好评。但当我们尝试在消费级显卡上部署这个模型时&#xff0c;很快就遇到了显存不足的问题—…...

编程新知 2026/4/14 7:03:17

Tag-it 事件处理完全手册：从点击到移除的全流程控制

Tag-it 事件处理完全手册&#xff1a;从点击到移除的全流程控制 【免费下载链接】tag-it aehlke/tag-it: 是一个用于管理文件标签的 jQuery 插件。适合对 jQuery、HTML 和想要管理文件标签的开发者。 项目地址: https://gitcode.com/gh_mirrors/ta/tag-it Tag-it 是一款…...

编程新知 2026/4/14 6:53:16