HTML + CSS 核心知识点- 定位

简述:

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

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 属性为 relativeabsolutefixed 或 sticky,或者设置 opacity 属性不为 1、transform 属性不为 nonefilter 属性不为 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%); 来实现元素相对于视口垂直居中显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/753513.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT进阶-----------认识QT相关的模块(第四天)

1、关于Visual Studio与QT Creator的不同导入方式 Visual Studio作为windows宇宙最强编辑器以及编译器&#xff0c;它相当的好用&#xff0c;作为一个学了一年QT的菜鸟&#xff0c;总结了一些关于VS以及QT Creator两者的不同。 首先&#xff0c;在VS中qt是作为第三方库导入到…

怎么做好独立站的SEO优化

随着全球贸易的蓬勃发展&#xff0c;越来越多的企业开始关注外贸市场&#xff0c;并将目光投向了外贸网站。然而&#xff0c;在竞争激烈的外贸市场中&#xff0c;如何写出吸引人的文章&#xff0c;以及如何优化网站以在搜索引擎中脱颖而出&#xff0c;成为了外贸独立网站必须面…

机器学习-绪论

机器学习致力于研究如何通过计算的手段、利用经验来改善系统自身的性能。在计算机系统中&#xff0c;“经验”通常以“数据”的形式存在&#xff0c;因此&#xff0c;机器学习所研究的主要内容&#xff0c;是关于在计算机上从数据中产生“模型”的算法&#xff0c;即“学习算法…

PHP<=7.4.21 Development Server源码泄露漏洞 例题

打开题目 dirsearch扫描发现存在shell.php 非预期解 访问shell.php&#xff0c;往下翻直接就看到了flag.. 正常解法 访问shell.php 看见php的版本是7.3.33 我们知道 PHP<7.4.21时通过php -S开起的WEB服务器存在源码泄露漏洞&#xff0c;可以将PHP文件作为静态文件直接输…

LLM 面试知识点——模型基础知识

1、主流架构 目前LLM(Large Language Model)主流结构包括三种范式,分别为Encoder-Decoder、Causal Decoder、Prefix Decode。对应的网络整体结构和Attention掩码如下图。 、 各自特点、优缺点如下: 1)Encoder-Decoder 结构特点:输入双向注意力,输出单向注意力。 代表…

Tomcat:Session ID保持会话

目录 前言 ​一、部署环境 二、部署nginx反向代理服务器 三、部署tomcat服务器1 四、部署tomcat服务器2 五、客户端测试&#xff08;Session ID不断变动&#xff09; 六、配置Session ID会话保持 七、客户端测试&#xff08;Session ID保持&#xff09; 前言 此次实验…

C语言自定义库

编写 xx.c 和xx.h文件\将源代码编译为目标文件 gcc -c add.c sub.c 执行完毕后会生产add.o和sub.o文件静态库创建使用ar命令&#xff1b; ar -r libmymath.a add.o sub.o将库和main.c文件一起编译 gcc -o main main.c -lmymath -L./ 注意 上述书写格式不要错乱 -L 是指定文件路…

鸿蒙-项目创建及了解

目录 项目创建 1.App普通项目创建 2.元服务创建 项目结构 .hvigor .idea AppScope entry EntryAbility.ts pages resources module.json5 ohosTest hvigorfile.ts build-profile.json5 oh_modules build-profile.json5 hvigorfile.ts 项目运行 项目创建 F…

单模场哈密顿量推导

满足麦克斯韦方程和边界条件的单模场又下式&#xff08;1&#xff09;&#xff0c;&#xff08;2&#xff09;给出 --------&#xff08;1&#xff09; ---------&#xff08;2&#xff09; , 单模场的经典场能或者哈密顿量又下式给出&#xff1a; &#xff08;3&#xff09…

JUC并发编程(四)

1、同步模式保护性暂停 用一个线程等待另一个线程的执行结果 有一个结果需要从一个线程传递到另一个线程&#xff0c;让他们关联同一个中间类。如果有结果不断从一个线程到另一个线程那么可以使用消息队列&#xff08;见生产者/消费者&#xff09;。JDK 中&#xff0c;join 的…

WebAssembly探索篇(三)emcc和cmake编译opencv案例

文章目录 开发环境安装opencv环境 实践出真知完整项目效果图 踩坑fatal error: opencv2/opencv.hpp file not found增加软链ln&#xff08;无效&#xff09;改用自行安装opencv&#xff0c;再显示指定lib路径 emcc命令行运行方式 最近因为项目原因&#xff0c;研究了一下WebAss…

C语言例:表达式 45-35+1^2 的值

代码如下&#xff1a; #include<stdio.h> int main(void) {int a;a 4&5-3&&51^2;printf("4&5-3&&51^2 %d\n",a);return 0; } 结果如下&#xff1a;

maven一点通

1.maven简介 Maven是一个基于Java的工程构建工具&#xff0c;用于管理和构建项目的依赖关系。它提供了一种标准的项目结构和一组约定&#xff0c;使得项目的开发、构建、部署和文档化更加容易和可靠。 Maven的主要功能包括&#xff1a; 依赖管理&#xff1a;Maven可以自动下载…

课设系统篇

《古代六扇门人员管理系统》 数据库 sixdoor 编码 utf8mb4 视图 查询官员等级 存储过程 CREATE DEFINERrootlocalhost PROCEDURE levelname(IN g_name VARCHAR(20)) BEGINSELECT name,level FROM servingofficials INNER JOIN jobtitle onservingofficials.role jobtitl…

Android性能自测

目录 一、应用启动耗时自测 二、帧率查看 三、Top命令查看系统资源占用 3.1 第一行&#xff1a;任务(进程) 3.2 第二行&#xff1a;mem状态 3.3 第三行&#xff1a;swap交换分区 3.4 第四行&#xff1a;cpu状态 3.5 第五行&#xff1a;标题 四、抓取trace.html文件分析…

基于tcp协议的网络通信(基础echo版.多进程版,多线程版,线程池版),telnet命令

目录 基础版 思路 辅助函数 服务端 代码 运行情况 -- telnet ip 端口号 传输的数据为什么没有转换格式 客户端 思路 代码 多进程版 引入 问题 解决 注意点 服务端 代码 运行情况 进程池版(简单介绍) 多线程版 引入 问题解决 注意点 服务端 代码 …

嵌入式Linux 内核的内存管理方法

内存管理的主要工作就是对物理内存进行组织,然后对物理内存的分配和回收。但是Linux引入了虚拟地址的概念。 虚拟地址的作用 如果用户进程直接操作物理地址会有以下的坏处: 1、 用户进程可以直接操作内核对应的内存,破坏内核运行。 2、 用户进程也会破坏其他进程的运行 …

连号区间数c++

题目 输入样例1&#xff1a; 4 3 2 4 1输出样例1&#xff1a; 7输入样例2&#xff1a; 5 3 4 2 5 1输出样例2&#xff1a; 9样例解释 第一个用例中&#xff0c;有 77 个连号区间分别是&#xff1a;[1,1],[1,2],[1,3],[1,4],[2,2],[3,3],[4,4][1,1],[1,2],[1,3],[1,4],[2,2…

详细讲解c语言结构体、联合体、枚举

目录 1、结构体类型声明 1.1结构体的定义 1.2 结构体变量的声明 1.3 结构体变量的创建和初始化 2、如何使创建的结构体所占内存最小 2.1 结构体内存对齐-存储 2.2 通过宏offsetof计算结构体内变量的偏移量 2.3 如何通过宏offsetof计算数组的偏移量 2.4 为什么存在内存对…

吴恩达机器学习笔记 二十四 决策树模型 学习过程 什么时候停止分裂 如何选择结点特征

案例&#xff1a;识别小猫&#xff0c;上面这个分类的特征 x 采用分类值&#xff08;几个离散的值&#xff09; 决策树最顶端的结点称根结点(root node)&#xff0c;除了根结点和叶子结点之外的叫决策结点(decision node)&#xff0c;最底层的叫叶子结点(leaf node)&#xff0c…