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

htmlCSS-----定位

news 2025/9/19 12:58:06

前言

定位

分类和取值

定位的取值

1.相对定位

2.绝对位置

元素居中操作

3.固定定位

前言

今天我们来学习html&CSS中的元素的定位，通过元素的定位我们可以去更好的将盒子放到我们想要的位置，下面就一起来看看吧！

定位

定位position属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

不同的定位值可以使元素拥有不同的表现形式，例如放在另外一个元素上面或者固定在浏览器的显示区某个位置

分类和取值

在html&CSS中定位分为4大类，分别是静态定位、相对定位、绝对定位和固定定位。而我们平时默认的都是静态定位，因此我们可以去通过position属性去改变定位的类型。

定位的取值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

静态定位实际上是默认的样式，元素保持原来的性质去排列放置，所以就不去做详细的说明了。下面我会一一介绍相对定位、绝对定位和固定定位。

1.相对定位

relative

相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

（定位元素才有的方位属性： top | bottom | left | right，值一般使用px单位或%值。）

特点

不会脱离文档流

不影响元素本身的任何特性

如果不加方位词偏移那么没有任何影响

示例：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./demo.css">
</head>
<!-- 这里的body是父类元素，把其中的字体间隔设为0可以删除掉元素本身固有的间隔 -->
<body style="font-size: 0;"><!-- 相对定位的特点 --><div class="box"> </div><div class="boo"></div>
</body>
</html>

CSS代码：

/* 相对定位 */
.box{position: relative;left: 100px;background-color: red;height: 200px;display: inline-block;width: 200px;
}
.boo{background-color: blueviolet;height: 200px;display: inline-block;width: 200px;
}

效果：

这里的红色把紫色的部分给覆盖掉了，因为红色的盒子设置了相对位置类型然后左移100个像素，所以会把原来紫色的部分给覆盖了。

以下是原来默认位置样式（静态位置）的效果（对比上图）：

2.绝对位置

absolute

绝对定位能让元素脱离文档流（原地起飞...），使用方位属性相对于最近的有定位的父级元素进行偏移；

注意！方位属性初始值不是0，而是auto。

方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。

特点

脱离文档流

元素宽高默认值为0

找不到最近的定位父级则相对于body标签

一般配合相对定位使用（参照物）

会将元素转换成块元素

设置了绝对定位,没有设置层级;html后写居上

margin:auto 暂时失效

基点（起始点/坐标原点）

绝对定位的基点是会往父元素找，如果父元素是相对定位（relative ）就以此为基点，如果不是的话就继续往上找，直到html元素为止。

绝对定位的元素跟浮动元素是有点相似的，但绝对定位是完全脱离文档流。

应用场景

1.元素不会占据页面空间

2.元素需要移动到指定位置

使用示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 绝对定位 */.fuc{position: absolute;left: 100px;background-color: red;height: 200px;display: inline-block;width: 200px;}.hhh{background-color: blueviolet;height: 200px;display: inline-block;width: 200px;}</style>
</head>
<body style><!-- 绝对定位 --><div class="fuc" ></div><div class="hhh"></div>
</body>
</html>

效果：

这里红色的盒子浮起来了，所以紫色的盒子是在最左边的，然后红色的盒子相对于基点右移了100个像素点，所以会覆盖掉紫色盒子的右半部分。

元素居中操作

元素居中是绝对定位最常见的操作，下面看代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 元素居中 */.leimu{position: absolute;/* 宽度和高度必须自己设置，绝对定位是默认为0的 */height: 100px;width: 100px;/* 这里是把盒子的起点定位为父元素盒子的中心位置，但并没有实现盒子居中 */left: 50%;top: 50%;background-color: blueviolet;/* 这里要设置margin左和上分别左移盒子宽度的一半和上移高度的一半 */margin-left: -50px;margin-top: -50px;}  </style>
</head>
<body><div style="height: 300px;width: 300px;border: 2px solid red;position: relative;"><div class="leimu"></div></div>
</body>
</html>

3.固定定位

fixed

固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；

特点

脱离文档流

元素宽高默认值为0

margin:auto失效

固定定位的基点（起始点）就是当前视口的起始点，换句话说就是当前页面的大小，默认视口大小=body 大小=html大小

应用场景

位置固定，不会随着页面滚动而滚动

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>    /* 元素居中 */.leimu{position: fixed;background-color: aquamarine;height: 100px;width: 100px;left: 1300px;top: 200px;}  </style>
</head>
<body style="margin: 0;"><div style="height: 8000px;background-color: rebeccapurple;"><div class="leimu"></div></div>
</body>
</html>

效果：

1690381934359

好了以上就是今天的全部内容了，我们下一期再见！

分享一张壁纸：

htmlCSS-----定位

目录前言定位分类和取值定位的取值 1.相对定位 2.绝对位置元素居中操作 3.固定定位前言今天我们来学习html&CSS中的元素的定位，通过元素的定位我们可以去更好的将盒子放到我们想要的位置，下面就一起来看看吧！ 定位定位posi…...

编程日记 2023/7/27 7:26:37

腾讯云大数据型CVM服务器实例D3和D2处理器CPU型号说明

腾讯云服务器CVM大数据型D3和D2处理器型号，大数据型D3云服务器CPU采用2.5GHz Intel Xeon Cascade Lake 处理器，大数据型D2云服务器CPU采用2.4GHz Intel Xeon Skylake 6148 处理器。腾讯云服务器网分享云服务器CVM大数据型CPU型号、处理器主频性能&#x…...

编程日记 2023/7/27 7:25:36

计算机科学cs/电子信息ei面试准备——数学基础/线性代数复习

1. 中值定理中值定理是反映函数与导数之间联系的重要定理，也是微积分学的理论基础，在许多方面它都有重要的作用，在进行一些公式推导与定理证明中都有很多应用。中值定理是由众多定理共同构建的，其中拉格朗日中值定理是核心&…...

编程日记 2023/7/27 7:24:35

极速查找（2）-算法分析

篇前小言本篇文章是对查找（1）的续讲线性索引查找线性索引查找（Linear Index Search）是一种基于索引的查找算法。它在数据集合中创建一个索引结构，然后使用该索引结构来加快对目标元素的查找。线性索引是一种在数…...

编程日记 2023/7/27 7:23:34

flask路由添加参数

flask路由添加参数在 Flask 中，可以通过两种方式在路由中添加参数：在路由字符串中直接指定参数，或者通过 request 对象从请求中获取参数。在路由字符串中指定参数：可以将参数直接包含在路由字符串中。参数可以是字符串、整数、…...

编程日记 2023/7/27 7:22:33

网络安全系统教程+学习路线（自学笔记）

一、什么是网络安全网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。无论网络、Web、移动、桌面、云等哪个领域，都有攻与防两面…...

编程日记 2023/7/27 7:21:32

23. 合并 K 个升序链表

题目描述给你一个链表数组，每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中，返回合并后的链表。示例 1： 输入：lists [[1,4,5],[1,3,4],[2,6]] 输出：[1,1,2,3,4,4,5,6] 解释：链表数组…...

编程日记 2023/7/27 7:20:31

Nexus3部署、配置+SpringBoot项目Demo

Docker部署Nexus 搜索Nexus3镜像：[rootlocalhost ~]# docker search nexus 拉取Nexus3镜像：[rootlocalhost ~]# docker pull sonatype/nexus3 启动Nexus3前查看虚拟机端口是否被占用：[rootlocalhost ~]# netstat -nultp 通过Docker Hub查看安…...

编程日记 2023/7/27 7:19:30

1.mysql Docker镜像 docker pull mysql:[版本号或 latest]例：docker pull mysql:5.7 2.查看拉取的docker镜像 docker images3.设置 Docker 卷 docker volume create mysql-data列出 Docker 已知的所有卷 docker volume ls4.运行一个 MySQL Docker 容器 docke…...

编程日记 2023/7/27 7:18:29

Vue - 可视化用户角色、菜单权限、按钮权限配置(动态获取菜单路由)

GitHub Demo 地址在线预览前言关于动态获取路由已在这里给出方案 Vue - vue-admin-template模板项目改造：动态获取菜单路由这里是在此基础上添加了系统管理模块，包含用户管理，角色管理，菜单管理，字典管理&#xf…...

编程日记 2023/7/27 7:17:27

hive库操作示例

hive库操作示例 1、常规表创建数据库 CREATE DATABASE mydatabase;使用数据库 USE mydatabase;创建表 CREATE TABLE mytable (id INT,name STRING,age INT ) ROW FORMAT DELIMITED FIELDS TERMINATED BY , STORED AS TEXTFILE;插入数据 INSERT INTO TABLE mytable VALUE…...

编程日记 2023/7/27 7:16:26

LeetCode第 N 个泰波那契数 (认识动态规划)

认识动态规划编写代码代码空间优化链接: 第 N 个泰波那契数编写代码 class Solution { public:int tribonacci(int n) {if(n 0){return 0;}else{if(n 1 || n 2)return 1;}vector<int> dp(n 1);dp[0] 0;dp[1] 1;dp[2] 1;for(int i 3;i < n;i){dp[i] dp[i-3]…...

编程日记 2023/7/27 7:15:25

线程安全问题（内存可见性）

导致的原因内存可见性问题的出现主要是因为编译器优化多线程导致的示例代码 package 线程安全问题;import java.util.Scanner;/*** Created with IntelliJ IDEA.* Description:* User: wuyulin* Date: 2023-07-26* Time: 13:49*/ public class Demo2 {private volatile sta…...

编程日记 2023/7/27 7:14:24

STM32MX配置EEPROM(AT24C02)------保姆级教程

———————————————————————————————————— ⏩ 大家好哇！我是小光，嵌入式爱好者，一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子，使用STM32CUBEMX做了很多驱动&#x…...

编程日记 2023/7/27 7:13:23

微信小程序样式和全局配置

WXSS wxss 把屏幕分为750个物理像素，大屏大，小屏小，随着设备不一致自动适配推荐使用iPhone6作为标准，1个rpx 0.5个px，把px乘以2就是rpx的参数 import 导入外部样式表 import /common/common.wxss 样式权重一…...

编程日记 2023/7/27 7:12:22

一.初识C语言

一.初识C语言 C语言标准规定： sizeof(long)>sizeof(int)就可以了变量要定义在当前代码块的最前面 #defin _CRT_SECURE_NO_WARNINGS 1#include <stdio.h> //包含一个stdio.h的文件 std-标准standard input outputint main() //主函数-程序的入口-main函数…...

编程日记 2023/7/27 7:11:21

filebeat到kafka示例

docker run -d \ --namefilebeat_7.14_0 \ #filebeat名称 --userroot \ --volume"/data/filebeat/filebeat.yml:/usr/share/filebeat/filebeat.yml" \ #映射filebeat.yml配置 --volume"/data/filebeat/log:/usr/share/filebeat/log" \…...

编程日记 2023/7/27 7:10:20

AlmaLinux系统下的Zabbix汉化

我安装的是zabbix下的虚拟机，安装完成后，直接可以打开网站了，但是界面是英文，看了设置，没有中文选项，就需要在系统中安装中文字符集了。 # locale -a #查看里面没有zh_CN之类的项 # dnf install -…...

编程日记 2023/7/27 7:09:19

【网络编程】(TCP流套接字编程 ServerSocket API Socket API 手写TCP版本的回显服务器 TCP中的长短连接)

文章目录网络编程TCP流套接字编程ServerSocket APISocket APITCP中的长短连接手写TCP版本的回显服务器网络编程 TCP流套接字编程 TCP提供的API主要是两个类:ServerSocket 和 Socket . TCP不需要一个类来表示"TCP数据报"因为TCP不是以数据报为单位进行传输的.是以…...

编程日记 2023/7/27 7:08:18

企业级PaaS低代码快开平台源码，基于 Salesforce Platform 的开源替代方案

PaaS低代码快开平台是一种快速开发应用系统的工具，用户通过少量代码甚至不写代码就可以快速构建出各种应用系统。随着信息化技术的发展，企业对信息化开发的需求正在逐渐改变，传统的定制开发已经无法满足企业需求。低代码开发平台&#xff0…...

编程日记 2023/7/27 7:07:17

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/9/17 6:03:49

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留，CCA-Attention为LLM长文本建模带来突破性进展琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制（CCA-Attention），…...

编程新知 2025/9/18 0:03:25

基于服务器使用 apt 安装、配置 Nginx

🧾 一、查看可安装的 Nginx 版本首先，你可以运行以下命令查看可用版本： apt-cache madison nginx-core输出示例： nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/8/26 18:00:13

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口默认RTMP接收推流端口是1935，SRS管理页面端口是8080，可…...

编程新知 2025/9/8 19:48:28