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

HTML + CSS 核心知识点- 定位

news 2025/11/16 2:38:56

简述：

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

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

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/11/11 6:24:12

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/10/16 22:41:12

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/11/12 15:21:51

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2025/11/12 15:17:22

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/11/12 20:31:25

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/11/15 4:16:23

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/11/15 22:23:19

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/11/11 1:28:39

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/11/13 18:52:54