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

测开：前端基础-css页面布局-定位

news 2026/2/9 18:42:51

一 、传统网页布局的三种方式

网页布局的本质–用CSS来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。

二、 定位 

2.1 啥是定位

我的理解，就是要把这个元素，放在哪个位置，这就是定位。

2.2 实现定位

通过属性 position 实现

2.3 定位的四种方式

前提，页面中有4个box.

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

2.3.1 静态定位

设置方式为position: static;

静态定位的盒子是标准流状态，用于取消定位。

静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2.3.2 相对定位

设置方式为position: relative;

相对定位：相对于原来在文档流的位置进行偏移

相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，相对定位的盒子是相对自己在标准流中的位置进行偏移，但是盒子在页面中占据的位置是不会改变的。

操作：

设置box1 ，相对定位，进行偏移.

			.box1{background-color: aqua;width: 120px;height: 120px;position: relative;left: 20px;bottom: 2.5rem;}

效果：

box1 相对于原来在文档流的位置进行偏移

 

2.3.3 绝对定位

设置方式为position: absolute;

绝对定位的盒子脱离了标准流，在页面中不占位置.

盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

注意：

设置了top、left、bottom、right属性后，绝对定位的盒子是相对设置了定位属性（静态定位不算）的最近的父级盒子的位置进行偏移，

如果没有设置了定位的父级盒子，则是相对于body标签进行偏移。

绝对定位的盒子可以通过设置z-index属性改变层级。

举例：

设置绝对属性，的元素，它的最近的父类没有设置定位，则相对于body标签进行偏移。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;position: absolute;left: 20px;bottom: 2.5rem;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

绝对定位的元素box1,相对于body进行了偏移 

 

 举例：

设置绝对属性，的元素，与它最近的父级盒子的位置进行偏移。

如下图，box6 设置了绝对定位。box6的父类id=app 设置了相对定位。

则box6的位置，是相对于它的app父类进行偏移的。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#app{background-color: chartreuse;position: relative;height: 200px;}.box5{background-color: aquamarine;width: 100px;height: 100px;}.box6{background-color: aqua;width: 120px;height: 120px;position: absolute;left: 200px;}.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="box">box</div><div class="box1">box1</div><div class="mybigbox" id="app"><div class="box5">box5</div><div class="box6">box6</div></div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

案例：

实现banner，两侧的滑动按钮。

父类设置相对定位，子类设置绝对定位。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#app{background-color: chartreuse;position: relative;height: 200px;}.box5{background-color: aquamarine;width: 100px;height: 100px;position: absolute;left: 200px;top: 40%;}.box6{background-color: aqua;width: 100px;height: 100px;position: absolute;right: 200px;top: 40%;}.box{background-color: aquamarine;width: 100px;height: 100px;}.box1{background-color: aqua;width: 120px;height: 120px;}.box2{background-color: olive;width: 150px;height: 150px;}.box3{background-color: olive;background-color: chocolate;width: 180px;height: 180px;}</style></head><body><div class="mybigbox" id="app"><div class="box5">box5</div><div class="box6">box6</div></div><div class="box">box</div><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></body>
</html>

2.3.4 固定定位

设置方式为position: fixed;

固定定位的盒子脱离了标准流，在页面中不占位置，

盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。

设置了top、left、bottom、right属性后，固定定位的盒子是相对浏览器串口进行偏移。不管浏览器滚动条如何滚动，固定定位的盒子永远显示在浏览器窗口，不会出现滚动条往下滚动后就看不到固定定位的盒子的情况。因此固定定位的盒子常用于做底部导航栏和顶部导航栏。

固定定位的盒子可以通过设置z-index属性改变层级。

固定定位的盒子默认的宽高由其内容决定。

			.box{background-color: aquamarine;position: fixed;right: 20px;width: 100px;height: 100px;}


 

相关文章：

测开：前端基础-css页面布局-定位

一 、传统网页布局的三种方式 网页布局的本质–用CSS来摆放盒子&#xff0c;把盒子摆放到相应的位置&#xff0c;css提供了三种传统布局方式&#xff0c;分别是标准流&#xff0c;浮动和定位三种。 二、 定位 2.1 啥是定位 我的理解&#xff0c;就是要把这个元素&#xff0c…...

编程日记 2023/3/6 20:10:03

Servlet中八个监听器介绍

一、监听对象创建的监听器 1、ServletContextListener /*** 用于监听ServletContext对象创建和销毁的监听器* since v 2.3*/public interface ServletContextListener extends EventListener {/*** 对象创建时执行此方法。该方法的参数是ServletContextEvent事件对象&#xf…...

编程日记 2023/3/6 20:08:55

LicenseBox Crack,对服务器的要求最低

LicenseBox Crack,对服务器的要求最低 LicenseBox是用于管理基于PHP的软件、WordPress插件或主题、主题、插件和WordPress的更新和许可的完整软件。它易于安装&#xff0c;对服务器的要求最低&#xff0c;用户友好的界面&#xff0c;无限脚本的使用为您的创造力打开了大门。 Li…...

编程日记 2023/3/6 20:07:50

css中重难点整理(vertical-align)

一、vertical-align 在学习vertical-align的时候&#xff0c;可能会很困惑。即使网上有一大推文章讲veitical-align,感觉看完好像懂了&#xff0c;等自己布局的时候用到vertical-align的时候好像对它又很陌生。这就是我在布局的时候遇到的问题。 本来vertical-align就很不好理…...

编程日记 2023/3/6 20:06:43

javaScript基础面试题 ---宏任务微任务

宏任务微任务一、为什么JS是单线程语言&#xff1f;二、JS是单线程&#xff0c;怎样执行异步代码&#xff1f;1、JS是单线程语言 2、JS代码执行流程&#xff0c;同步执行完&#xff0c;再进行事件循环&#xff08;微任务、宏任务&#xff09; 3、清空所有的微任务&#xff0c;再…...

编程日记 2023/3/6 20:05:38

基于JSP的网上书城

技术&#xff1a;Java、JSP等摘要&#xff1a;随着科技的迅速发展&#xff0c;计算机技术已应用到社会的各个领域。随着计算机技术和通信技术的迅速发展&#xff0c;网络的规模也逐渐增大&#xff0c;网络的元素也随之不断增加&#xff0c;有的利用其通信&#xff0c;有的利用其…...

编程日记 2023/3/6 20:04:31

C#教程 05 常量

文章目录 C# 常量整数常量浮点常量字符常量字符串常量定义常量C# 常量 常量是固定值，程序执行期间不会改变。常量可以是任何基本数据类型，比如整数常量、浮点常量、字符常量或者字符串常量，还有枚举常量。 常量可以被当作常规的变量，只是它们的值在定义后不能被修改。 整数…...

编程日记 2023/5/11 6:44:38

【华为OD机试真题java、python】基站维修工程师【2022 Q4 100分】（100%通过）

代码请进行一定修改后使用，本代码保证100%通过率。本文章提供java、python两种代码 题目描述 小王是一名基站维护工程师，负责某区域的基站维护。 某地方有 n 个基站（ 1<n<10 ），已知各基站之间的距离 s（ 0<s<500 ）， 并且基站 x 到基站 y 的距离，与基站 y …...

编程日记 2023/3/6 20:02:16

你是真的“C”——为冒泡排序升级赋能！

你是真的“C”——为冒泡排序升级赋能&#xff01;&#x1f60e;前言&#x1f64c;冒泡排序升级赋能之境界一&#xff01;冒泡排序升级赋能之境界二&#xff01;qsort库函数的运用和认识总结撒花&#x1f49e;&#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的…...

编程日记 2023/5/11 21:05:17

【JavaEE】基于mysql与servlet自制简易的表白墙程序

文章目录1 表白墙页面构建2 Servlet 回顾3 表白墙后端程序实现3.1 我们需要做什么&#xff1f;3.2 实现细节4 实现结果写在最后1 表白墙页面构建 该页面由标题、文本、三个 input 输入框与一个提交按钮构成&#xff0c;整体比较简单&#xff0c;相关样式文件和页面代码会在后面…...

编程日记 2023/5/11 21:05:14

抓包技术(浏览器APP小程序PC应用)

P1 抓包工具 01. Fidder 首先第一个Fiddler它的优势&#xff0c;独立运行&#xff0c;第二个支持移动设备&#xff08;是否能抓移动APP的包&#xff0c;&#xff09;在这一块的话wireshark、httpwatch就不支持&#xff0c;因此在这一块就可以排除掉前连个&#xff0c;因为我们…...

编程日记 2023/5/11 21:05:08

linux笔记(10):ubuntu环境下，基于SDL2运行lvgl+ffmpeg播放mp4

文章目录1.ubuntu安装ffmpeg1.1 源码安装1.1 克隆ffmpeg源码1.2 配置编译条件&#xff0c;编译&#xff0c;安装1.2 直接安装依赖包2.下载lvgl源码2.1 测试原始代码2.2 运行lv_example_ffmpeg_2()例程2.2.1 配置 LV_USE_FFMPEG 为 12.2.2 lv_example_ffmpeg_2()替换lv_demo_wid…...

编程日记 2023/5/8 20:04:15

JavaScript专题之类型判断(下)

参考原文&#xff1a;JavaScript专题之类型判断(下) 前言 在上篇《JavaScript专题之类型判断(上)》中&#xff0c;我们抄袭 jQuery 写了一个 type 函数&#xff0c;可以检测出常见的数据类型&#xff0c;然而在开发中还有更加复杂的判断&#xff0c;比如 plainObject、空对象…...

编程日记 2023/5/11 21:05:03

【VC 7/8】vCenter Server 基于文件的备份和还原Ⅲ—— 使用 SMB 协议备份 VC（VAMI 中文）

目录2.2 使用 SMB 协议备份 VC&#xff08;VAMI 中文&#xff09;&#xff08;1&#xff09;登录 vCenter Server 管理界面&#xff08;2&#xff09;进入备份页面&#xff08;3&#xff09;配置 Backup Schedule&#xff08;4&#xff09;开始备份&#xff08;5&#xff09;备…...

编程日记 2023/5/11 21:05:00

linux - 内核编译

一. 编译的实质基于头文件和c文件--->产生对象文件(.o)将所有的对象文件链接起来&#xff0c;产生可执行文件。内核的编译系统组成Makefile分布在内核源代码中的Makefile&#xff0c; 定义内核的编译规则&#xff0c;配合Kconfig使用。Kconfig配置文件&#xff0c;给用户提供…...

编程日记 2023/5/11 21:04:55

Spring——配置文件实现IOC和DI入门案例

现在先如图创建如下的Maven项目&#xff0c;在业务层和数据层分别写上对应的接口和实现类 在BookServiceImpl中创建一个BookDaoImpl对象&#xff0c;并调用里面的save()方法。 在测试类里面new一个bookservice的实现类&#xff0c;调用save()方法 输出如下图所示 要使用IOC容…...

编程日记 2023/5/11 21:04:48

机器学习100天（四十一）：041 对偶支持向量机-公式推导

《机器学习100天》完整目录：目录 机器学习 100 天，今天讲的是：对偶支持向量机-公式推导！ 本节主要延续上一节的内容，推导线性支持向量机的对偶形式。本节内容包含的数学理论和推导很多，我尽量简化其中的数学部分，只做感性的介绍，便于大家在理解的同时不受数学复杂公式…...

编程日记 2023/5/11 21:04:41

C语言下的signal()函数

signal()简介 signal() 函数是 C 语言中用于处理系统信号的函数。它在 signal.h 头文件中进行声明。信号用作进程间通信&#xff0c;报告异常行为&#xff0c;例如除零&#xff0c;或用户的一些按键组合&#xff0c;例如同时按下 Ctrl 与 C 键&#xff0c;产生信号 SIGINT。 …...

编程日记 2023/5/11 21:04:34

google独立站和与企业官网的区别是什么？

google独立站和与企业官网的区别是什么&#xff1f; 答案是&#xff1a;独立站通过谷歌SEO优化可以更好的获取自然排名的流量。 随着互联网的不断发展&#xff0c;企业越来越重视自身网站的建设和优化&#xff0c;而在企业网站建设中&#xff0c;很多人会犯一个常见的错误&am…...

编程日记 2023/5/11 21:04:25

Vue3---语法初探

目录 hello world 实现简易计时显示 反转字符串 显示隐藏 了解循环 了解双向绑定实现简易记事 设置鼠标悬停的文本 组件概念初探&#xff0c;进行组件代码拆分 hello world 最原始形态&#xff0c;找到 id 为 root 的标签&#xff0c;将 Vue 实例的模板放入标签之内 …...

编程日记 2023/5/11 21:04:20

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

编程新知 2026/2/2 17:06:29

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2026/2/3 19:38:38

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

编程新知 2025/12/15 8:20:48

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2026/2/8 2:26:12

深度解析云存储：概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...

编程新知 2025/10/30 6:08:18

计算机系统结构复习-名词解释2

1.定向&#xff1a;在某条指令产生计算结果之前&#xff0c;其他指令并不真正立即需要该计算结果&#xff0c;如果能够将该计算结果从其产生的地方直接送到其他指令中需要它的地方&#xff0c;那么就可以避免停顿。 2.多级存储层次&#xff1a;由若干个采用不同实现技术的存储…...

编程新知 2025/12/9 20:41:12