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

HTML---定位

news 2026/2/4 11:16:05

目录

文章目录

一.定位属性概述

二.position

基础数值

 三.z-index属性

 网页元素透明度

练习

一.定位属性概述

   HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。

  • position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。
  • top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；当position属性的值为absolute或fixed时，这些属性参照的是最近的具有定位属性的父元素进行调整。

二.position

基础数值

position属性中的值
static默认值，没有定位
relative相对定位
absolute绝对定位
fixed固定定位

演示案例： 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{margin: 10px; padding: 5px; font-size: 15px; line-height: 25px;}#father{border: 1px solid red;padding: 0px;}#first{background-color: orange;border: 1px blue dashed;}#second{background-color: aqua;border: 1px gray dashed;}#third{background-color: aquamarine;border: 1px green solid;}</style></head><body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></body>
</html>

  • static 

默认值，无定位

  • relative

相对定位：元素相对于其正常位置进行定位，可以通过top、right、bottom、left属性调整位置。

  • 案例：
#first{background-color: orange;border: 1px blue dashed;position: relative;top: 100px;/**设置偏移量**/
}

相对定位中元素的原有位置会被保留，父级边框不会塌陷。 相对定位中top：0px left：0px的坐标轴为元素本身。

  •  absolute

绝对定位：设置绝对定位后的元素将处于悬浮状态。

  •  案例：
#first{background-color: orange;border: 1px blue dashed;position: absolute;	}

结论： 

绝对定位的元素会触发浮动：悬浮，剩余元素将自动补齐浮动元素的位置。 

  • 停留在浏览器的左上角 
#first{background-color: orange;border: 1px blue dashed;position: absolute;	top: 0px;left: 0px;}

  • 停留在上一级元素边框的左上角 
#father{border: 1px solid red;padding: 0px;position: relative;}
#first{background-color: orange;border: 1px blue dashed;position: absolute;	top: 0px;left: 0px;}

结论： 

 绝对定位的top：0px left：0px 的坐标轴在上一级设置过元素的左上角，若没有则停留在浏览器左上角。

  •  fixed

固定定位：

固定定位的元素不会随着浏览器的滚动而改变位置，但会脱离标准文档流，产生悬浮

案例：

#father{border: 1px solid red;padding: 0px;height: 1000px;}
#first{background-color: orange;border: 1px blue dashed;position: absolute;		}
#second{background-color: aqua;border: 1px gray dashed;}
#third{background-color: aqua;border: 1px gray dashed; position: fixed;}

  • 停留在浏览器左上角 
#third{background-color: aqua;border: 1px gray dashed; position: fixed;top: 0px;left: 0px;}

 三.z-index属性

在CSS中，z-index属性用于控制元素的堆叠顺序。它指定了一个元素在Z轴上的顺序，即元素在层叠元素堆里的垂直位置。

当两个或多个元素重叠时，z-index属性决定了哪个元素会显示在顶部。默认情况下，元素的堆叠顺序由它们在HTML中的出现顺序决定。后出现的元素会覆盖先出现的元素。

z-index属性的值可以是整数或auto。较高的值表示元素将显示在较低的值上面。

例如，如果一个元素A具有z-index值为2，而另一个元素B具有z-index值为1，那么元素A将显示在元素B上面。

 网页元素透明度

 案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;				}ul{list-style: none;position: relative;}#content{width: 330px;overflow: hidden;padding: 5px;font-size: 12px;line-height: 25px;border: 1px red solid;	margin: 0 auto;/***设置边框居中*/}#l2,#l3{ /**id="l2"作为空列表属于块状元素需要设置高度否则会被下级元素覆盖**/position: absolute;width: 330px;height: 25px;top:100px}#l2{color: aliceblue;text-align: center;z-index: 0;}#13{}#l3{background-color: black;opacity:0.5;z-index: 1;}</style></head><body><div id=content><ul><li><img src="picture1.png"/></li><li id="l2">金秋魅力.相约共享香山红叶</li><li id="l3"></li><!--设置一个空列表作为id="12"的背景列表--><li>时间:2023年12月20日20:28:10</li><li>地点:朝阳区西大望江路珠江帝景K区正门前集合</li></ul></div></body>
</html>

练习

相关文章：

HTML---定位

目录 文章目录 一.定位属性概述 二.position 基础数值 三.z-index属性 网页元素透明度 练习 一.定位属性概述 HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性&#xff0c;包括position、top、bottom、left和right等。 position属性指定了元素的定位方式&a…...

编程日记 2023/12/28 5:50:12

JVM高频面试题（2023最新版）

JVM面试题 1、JVM内存区域 Jvm包含两个子系统和两个组件。 1.1子系统 Class loader&#xff08;类加载器&#xff09;&#xff1a;根据给定的全限定名类名&#xff08;java.lang.object&#xff09;来装载class文件到Runtime data area&#xff08;运行时数据区&#xff09;…...

编程日记 2023/12/28 5:43:05

webpack学习-7.创建库

webpack学习-7.创建库 1.暴露库1.1概念1.2验证1.2.1 不导出方法1.2.2 导出方法 2.外部化 lodash3.外部化的限制4.最终步骤5.使用自己的库5.1坑 6.总结 1.暴露库 这个模块学习有点坑。看名字就是把自己写的个包传到npm&#xff0c;而且还要在项目中使用到它&#xff0c;支持各种…...

编程日记 2023/12/28 5:42:03

MQTT - 笔记

1 Mosquitto 官网 https://mosquitto.org/ 2 Windows环境下安装配置Mosquitto服务及入门操作介绍 Windows环境下安装配置Mosquitto服务及入门操作介绍-CSDN博客 3 开源：MQTT安装与配置使用 【C++】开源：MQTT安装与配置使用_c++ mqtt-CSDN博客 4 一文搞懂Qt-MQTT开发...

编程日记 2023/12/28 5:37:59

Django 安装

各位小伙伴想要博客相关资料的话&#xff0c;关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; Django 安装 在安装 Django 前&#xff0c;系统需要已经安装了 Python 的开发环境。 如果你还没有安装 Python&#xff0c;请先从 Python 官网 https://www.python…...

编程日记 2023/12/28 5:34:57

推荐一个vscode看着比较舒服的主题：Dark High Contrast

主题名称&#xff1a;Dark High Contrast &#xff08;意思就是&#xff0c;黑色的&#xff0c;高反差的&#xff09; 步骤&#xff1a;设置→Themes→Color Theme→Dark High Contrast 效果如下&#xff1a; 感觉这个颜色的看起来比较舒服。...

编程日记 2023/12/28 5:32:55

YCSB 测试表预分区

最近使用 YCSB 测试时&#xff0c;一直使用如下方法创建预分区&#xff1a; TABLE_NAME"usertable" REGIN_SPLITS$((510-1)) cat << EOF | sudo -u hbase hbase shell create ${TABLE_NAME}, cf, {SPLITS > (1..${REGIN_SPLITS}).map {|i| "user#{100…...

编程日记 2023/12/28 5:31:54

K8s 教程

一文让你全面了解K8s(Kubernetes) - 知乎 Install and Set Up kubectl on Linux | Kubernetes阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 留存一份地址...

编程日记 2023/12/28 5:29:52

python：改进型鳟海鞘算法（SSALEO）求解23个基本函数

一、改进型鳟海鞘算法SSALEO 改进型鳟海鞘算法&#xff08;SSALEO&#xff09;由Mohammed Qaraad等人于2022年提出。 参考文献&#xff1a;M. Qaraad, S. Amjad, N. K. Hussein, S. Mirjalili, N. B. Halima and M. A. Elhosseini, "Comparing SSALEO as a Scalable Larg…...

编程日记 2023/12/28 5:28:51

Hive-数据模型详解（超详细）

文章目录 一、Hive数据模型1. 概述2. 数据库和表(1) 创建数据库(2) 使用数据库(3) 创建表格(4) 查看表结构 3. 分区与桶(1) 分区(2) 桶 4. 数据加载与查询(1) 数据导入(2) 查询语句 5. 总结 一、Hive数据模型 1. 概述 Hive是基于Hadoop的数据仓库工具&#xff0c;它提供了类似…...

编程日记 2023/12/28 5:27:50

docker的常规使用总结

不安装docker下载镜像&#xff0c;或者下载异构镜像&#xff0c;模拟docker客户端 https://pull.7ii.win/ 1、启动docker服务 systemctl start docker 设置开机自启 systemctl enable docker 2、查看镜像 docker images --查看下载镜像架构 docker inspect 镜像名字 |…...

编程日记 2023/12/28 5:15:38

CSS 文字弹跳效果

鼠标移过去 会加快速度 <template><div class"bounce"><p class"text" :style"{animationDuration: animationDuration}">欢迎使用UniApp Vue3&#xff01;</p></div> </template><script> export d…...

编程日记 2023/12/28 5:09:32

什么是动态IP？静态IP和动态IP有什么区别？

动态IP(Dynamic IP)和静态IP(Static IP)它是指在计算机网络中分配给设备的两种不同类型的IP地址。 动态IP是指每次设备连接到网络时&#xff0c;网络服务提供商(ISP)IP地址的动态分配。当设备重新连接到网络时&#xff0c;它可能会被分配到不同的IP地址。动态IP适用于传统的家…...

编程日记 2023/12/28 5:05:27

Linux 与 Shell

Linux系统的四部分&#xff1a;Linux系统的核心是内核。内核主要负责四种功能&#xff1a; 系统内存管理 操作系统内核的主要功能之一&#xff1a;内存管理。&#xff08;物理内存 虚拟内存&#xff09;内核通过硬盘上称为交换空间&#xff08;swap space&#xff09;的存储区…...

编程日记 2023/12/28 4:49:12

大数据-Hive练习-环比增长率、同比增长率、复合增长率

目录 &#x1f959;12.1 环比增长率 1. 概述 2. 公式 3. 示例 4.练习-需求:计算各类商品的月环比增长率 &#x1f959;12.2 同比增长率 1. 概述 2. 公式 3. 示例 4. 练习-需求:计算各类商品的月同比增长率 &#x1f959;12.3 复合增长率 1. 概述 2. 公式 3. 示例…...

编程日记 2023/12/28 4:47:10

C++ 考前难点总结

前言 后天考c&#xff0c;但这几天得甲流了&#xff0c;特别难受&#xff01;复习c的时候复习着忘着&#xff0c;所以用csdn记录一下不熟悉的知识点&#xff0c;等后天考前再看一遍&#xff01; 函数模板 #include <iostream>// 定义一个模板类 template <class T1…...

编程日记 2023/12/28 4:44:08

ARM 汇编语言知识积累

博文参考&#xff1a; arm中SP&#xff0c;LR&#xff0c;PC寄存器以及其它所有寄存器以及处理器运行模式介绍 arm平台根据栈进行backtrace的方法-腾讯云开发者社区-腾讯云 (tencent.com) 特殊功能寄存器&#xff1a; SP&#xff1a; 即 R13&#xff0c;栈指针&#xff0c;…...

编程日记 2023/12/28 4:43:06

k8s面试之——简述网络模型

kubernetes网络模型是kubernetes集群中管理容器网络通信的一种机制&#xff0c;用于实现pod间、pod与外部网络间的通信和互联&#xff0c;并提供了多种网络插件和配置选项来满足不同应用场景下的需求。kubernetes网络模型可以分为一下几个部分&#xff1a; 1. pod网络模型 在…...

编程日记 2023/12/28 4:42:05

C语言中关于if else的理解

if else我们可以理解为 if(条件1) //如果条件1成立 语句1&#xff1b; //执行语句1 else //如果条件1不成立 语句2; //执行语句2 这是一个经典的if els…...

编程日记 2023/12/28 4:41:04

Keil5软件仿真 定时器互补通道 波形输出（Logic Analyzer）

步骤一&#xff1a;管脚配置确认。 ①配置定时器的管脚模式为复用推挽输出模式&#xff08;GPIO_MODE_AF_PP&#xff09;&#xff01;&#xff01;&#xff01;&#xff0c;注意&#xff1a;复用开漏模式软件仿真时无波形。 步骤二&#xff1a;编译程序。 ①点击编译按钮。 …...

编程日记 2023/12/28 4:40:03

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/2 22:26:49

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/1 2:31:16

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2026/1/29 21:20:51

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2026/1/22 11:16:26

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/1/24 15:09:43

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2026/1/26 12:37:40