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

htmlCSS-----定位

news 2026/2/8 19:30:15

目录

前言

定位

 分类和取值

定位的取值

 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中的元素的定位&#xff0c;通过元素的定位我们可以去更好的将盒子放到我们想要的位置&#xff0c;下面就一起来看看吧&#xff01; 定位 定位posi…...

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

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

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

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

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

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

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

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

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

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

flask路由添加参数

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

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

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

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

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

23. 合并 K 个升序链表

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

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

Nexus3部署、配置+SpringBoot项目Demo

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

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

linux下用docker安装mysql

1.mysql Docker镜像 docker pull mysql:[版本号 或 latest]例&#xff1a;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模板项目改造&#xff1a;动态获取菜单路由 这里是在此基础上添加了系统管理模块&#xff0c;包含用户管理&#xff0c;角色管理&#xff0c;菜单管理&#xff0c;字典管理&#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)------保姆级教程

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

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

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

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

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

一.初识C语言

一.初识C语言 C语言标准规定&#xff1a; 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下的虚拟机&#xff0c;安装完成后&#xff0c;直接可以打开网站了&#xff0c;但是界面是英文&#xff0c;看了设置&#xff0c;没有中文选项&#xff0c;就需要在系统中安装中文字符集了。 # 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低代码快开平台是一种快速开发应用系统的工具&#xff0c;用户通过少量代码甚至不写代码就可以快速构建出各种应用系统。 随着信息化技术的发展&#xff0c;企业对信息化开发的需求正在逐渐改变&#xff0c;传统的定制开发已经无法满足企业需求。低代码开发平台&#xff0…...

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

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2026/2/3 22:50:07

ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

编程新知 2026/2/5 8:19:14

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/24 20:09:04

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2026/1/25 8:10:56

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27