CSS:position属性

news2024/11/13 15:10:12

一、属性值

1.1 fixed

固定位置的元素,相对于浏览器窗口进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

网站中的固定 header 和 footer 就是用固定定位来实现的;

header效果图
在这里插入图片描述

footer效果图
在这里插入图片描述

1.2 absolute

绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

会相对于最近的除 static 定位以外的元素进行定位,在使用时要注意设置父元素(或祖先元素)的 position 属性,若父元素(或祖先元素)都没有设置定位属性,absolute 会找到最上层即浏览器窗口,相对于它进行定位了。

效果图
在这里插入图片描述

在这里插入图片描述

1.3 relative

相对定位的元素,相对于其正常位置进行定位。

不添加额外属性(left,right,top,bottom 等),它表现的如同 static 一样,如 .box_1。属性 left,right,top,bottom 会使元素偏离正常位置

因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。

效果图
在这里插入图片描述

1.4 static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

二、position.css代码

* {
	/* 
		去掉默认内外边距
	 */
	padding: 0rem;
	margin: 0rem;
}

.top {
	width: 100%;
	height: 10rem;
	background-color: red;
}

.topToolBar1 {
	width: 100%;
	height: 3.125rem;
	position: fixed;
	/**
	  display: flex
	 */
	display: flex;

	align-items: center;

	font-size: 1rem;
	background-color: aquamarine;
	/* 
		solid解决border无法显示的问题
	 */
	border-bottom: 0.125rem solid;
	border-bottom-color: #f2f2f2;
}

.topTab {
	position: fixed;
	width: 100%;
	margin-top: 3.25rem;
	height: 3.125rem;
	background-color: gray;
}

.middle {
	width: 100%;
	height: 16.25rem;
	position: relative;
	background-color: blue;
}

.middle-child1 {
	position: absolute;
	width: 18.75rem;
	height: 12.5rem;
	background-color: #b1f5f0;
}

.middle-child2 {
	position: absolute;
	width: 18.75rem;
	height: 2.5rem;
	background-color: #f3d30e;
	z-index: 30;
}

.middle-child1-1 {
	position: relative;
	width: 10rem;
	height: 5rem;
	background-color: #3c00f3;
}

.middle-child1-2 {
	position: relative;
	z-index: 10;
	width: 8rem;
	height: 3.75rem;
	background-color: #f1680e;
}

.middle-child1-3 {
	position: relative;
	width: 6rem;
	height: 2.5rem;
	left: 1.25rem;
	z-index: 20;
	background-color: #5dfa1d;
}

.middle-child1-4 {
	position: relative;
	width: 4rem;
	height: 2.5rem;
	z-index: 20;
	background-color: #18b9f3;
}

.bottom1 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	background-color: green;
}

.bottom2 {
	width: 100%;
	height: 10rem;
	bottom: 0;
	margin-bottom: 3.125rem;
	background-color: green;
}

.bottomTip {
	position: fixed;
	width: 100%;
	height: 3.125rem;
	background-color: gray;
	/* 
		line-height
		单行文字居中显示
	 */
	/* line-height: 3.125rem; */
	text-align: center;
	vertical-align: middle;
	font-size: 0.875rem;
	bottom: 0;
	padding-left: 0.625rem;
	padding-right: 0.625rem;

	/* 
		解决padding-right没有生效问题
		https://www.cnblogs.com/aoximin/p/13173636.html
		
		box-sizing: border-box
		
		这个属性可以设置:
		内部宽度+padding+border=容器宽度=实际宽度。
		
		比如我设置了宽度为100%,那么个宽度为:父类的宽度(100%)=子类的宽度+padding+border
	 */
	box-sizing: border-box;
}

三、position.html

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>测试position</title>
		<link rel="stylesheet" href="../css/position.css" />
	</head>
	<body>
		<!-- https://www.w3cschool.cn/css/css-positioning.html -->
		<div class="top" id="top">
			<div class="topToolBar1">
				<div id="back">返回 </div>
				<div id="search"> 搜索 </div>
				<div id="msg">消息</div>
			</div>
			<div class="topTab">tab</div>
		</div>

		<div class="middle" id="middle">

			<div class="middle-child1">
				<div class="middle-child1-1">
child1-1
				</div>

				<div class="middle-child1-2">
child1-2
				</div>

				<div class="middle-child1-3">
child1-3
				</div>

				<div class="middle-child1-4">
child1-4
				</div>

			</div>

			<div class="middle-child2">child2</div>

		</div>
		<div class="bottom1" id="bottom1">
			<h3>底部1</h3>
		</div>
		<div class="bottom2" id="bottom2">
			<h3>底部2</h3>
			<p>
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
				底部内容底部内容底部内容底部内容底部内容
			</p>
			<p>
				hello hellohellohellohellohellohellohellohello
				wordwordwordwordwordwordwordwordwordwordword
			</p>
			<p>
				endendendendendendendendendendendendendendendL
			</p>
		</div>
		<div class="bottomTip">
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			温馨提示温馨提示温馨提示
			bfdhhhtjtujuj6t
		</div>

	</body>
</html>

四、testH5源码

点击查看testh5源码

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

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

相关文章

“微软蓝屏”事件,给IT行业带来的宝贵经验和教训

“微软蓝屏”事件是指2024年7月19日发生的一次全球性技术故障&#xff0c;主要涉及微软视窗&#xff08;Windows&#xff09;操作系统及其相关应用和服务。 以下是对该事件的详细解析&#xff1a; 一、事件概述 发生时间&#xff1a;2024年7月19日事件影响&#xff1a;全球多个…

linux 解决端口占用

1.查询被占用的端口 netstat -tln | grep 60602.查询该端口对应的服务 lsof -i :60603.杀死该进程 //14868是第二步的PID kill -9 14868

Docker容器逃逸漏洞-CVE-2024-21626

Snyk 在 Docker 引擎以及其他容器化技术(例如 Kubernetes)使用的 runc <=1.1.11 的所有版本中发现了一个漏洞。利用此问题可能会导致容器逃逸到底层主机操作系统,无论是通过执行恶意映像还是使用恶意 Dockerfile 或上游映像构建映像(即使用时FROM) CVE-2024-21626原理…

【iOS】——属性关键字

属性关键字的类型 在iOS中属性关键字分为四种类型&#xff1a; 可访问性: readonly ,readwrite原子性 &#xff1a; atomic &#xff0c;nonatomic内存管理 &#xff1a; retain/strong/copy&#xff0c; assign/unsafe_unretained&#xff0c;weak方法命名&#xff1a;sette…

RDMA通信4:MR(Memory Region, 内存区域)基本概念和作用

MR简介 RDMA通信中MR(Memory Region)指的是由RDMA软件层在内存中规划出的一片区域&#xff0c;用于存放收发的数据。IB协议中&#xff0c;用户在申请完用于存放数据的内存区域之后&#xff0c;都需要通过调用IB框架提供的API注册MR&#xff0c;才能让RDMA网卡访问这片内存区域…

Linux常用特殊符号

1、 > 和 >> 用法 这两个符号> 和 >> 主要区别如下&#xff1a; 符号>&#xff1a;覆盖现有文件&#xff0c;如果目录中不存在上述名称的文件&#xff0c;则创建一个文件。 符号>>&#xff1a;追加现有文件&#xff0c;如果目录中不存在上述名称的文…

Qt/C++音视频开发79-采集websocket视频流/打开ws开头的地址/音视频同步/保存到MP4文件/视频回放

一、前言 随着音视频的爆发式的增长&#xff0c;各种推拉流应用场景应运而生&#xff0c;基本上都要求各个端都能查看实时视频流&#xff0c;比如PC端、手机端、网页端&#xff0c;在网页端用websocket来接收并解码实时视频流显示&#xff0c;是一个非常常规的场景&#xff0c…

达梦数据库迁移DTS表对比

达梦数据库迁移DTS表对比 背景 达梦数据库迁移mysql2dm&#xff0c;使用dts迁移后的表数据精度不对&#xff0c;需要修正。网上很难搜到&#xff0c;特此记录。 DTS对比数据 1.创建对比 2.设置源库和目标库 3.选择对比选项 4.指定模式 5.指定对象 选择添加源确定 点击配置…

AI学习记录 -使用react开发一个网页,对接chatgpt接口,附带一些英语的学习prompt

实现了如下功能&#xff08;使用react实现&#xff0c;原创&#xff09; 实现功能&#xff1a; 1、对接gpt35模型问答&#xff0c;并实现了流式传输&#xff08;在java端&#xff09; 2、在实际使用中&#xff0c;我们的问答历史会经常分享给他人&#xff0c;所以下图的 copy …

OCC 扫掠

目录 一、概述 1、扫掠类型分类 2、扫掠方式分类 二、详细介绍 1. 直线扫掠(Linear Sweep) 2. 旋转扫掠(Revolution) 3. 一般路径扫掠(General Path Sweep) 三、总结 一、概述 OpenCASCADE (OCC) 中的扫掠(Sweeping)操作是一种常用的几何建模技术,用于通过沿着…

Java文件读取 jar包内文件读取

全文详见个人博客&#xff1a;https://www.coderli.com/jar-classloader/ Java文件读取 jar包内文件读取最近遇到一些Jar包内外配置文件读取的问题。索性自己测试总结一下&#xff0c;与大家分享。 主要是关于ClassLoader.getResource和Class.getResource方法路径区别的问题。…

python:切片

Python 中的切片&#xff08;slicing&#xff09;是一种强大的功能&#xff0c;它允许你获取序列&#xff08;如列表、元组、字符串等&#xff09;的一个子集。切片操作通过指定序列的起始索引、结束索引&#xff08;可选&#xff09;和步长&#xff08;可选&#xff09;来实现…

IOCTLance:一款针对x64 WDM驱动程序的漏洞检测工具

关于IOCTLance IOCTLance是一款针对x64 WDM驱动程序的漏洞检测工具&#xff0c;该工具来源于CODE BLUE 2023上展示的一个名为“使用符号执行和污点分析增强 WDM 驱动程序漏洞检测 ”的项目。该工具能够有效增强检测Windows驱动程序模型&#xff08;WDM&#xff09;驱动程序中各…

数模·插值和拟合算法

插值 将离散的点连成曲线或者线段的一种方法 题目中有"任意时刻任意的量"时使用插值&#xff0c;因为插值一定经过样本点 插值函数的概念 插值函数与样本离散的点一一重合 插值函数往往有多个区间&#xff0c;多个区间插值函数样态不完全一样&#xff0c;简单来说就…

动态住宅IP和静态住宅IP主要区别是什么?

在互联网连接的世界中&#xff0c;IP地址是我们识别和访问网络资源的关键。住宅IP地址&#xff0c;特别是动态住宅IP和静态住宅IP&#xff0c;是两种不同类型的IP分配方式&#xff0c;它们在使用和功能上存在显著差异。 1. IP地址的稳定性 动态住宅IP&#xff1a;这种IP地址是…

redis命令超详细

redis数据结构介绍 redis是一个key-value的数据库&#xff0c;key一般是String类型&#xff0c;但是value的类型有很多&#xff1a; 基本类型&#xff1a;String,Hash,List,Set,SortedSet(可排序的不能重复的集合) 特殊类型&#xff1a;GEO,BitMap,HyperLog等 文档官网&…

CSS3雷达扫描效果

CSS3雷达扫描效果https://www.bootstrapmb.com/item/14840 要创建一个CSS3的雷达扫描效果&#xff0c;我们可以使用CSS的动画&#xff08;keyframes&#xff09;和transform属性。以下是一个简单的示例&#xff0c;展示了如何创建一个类似雷达扫描的动画效果&#xff1a; HTM…

Python -numpy 基础-------1

NumPy&#xff08;Numerical Python&#xff09;是Python的一个开源数值计算扩展库。它支持大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。NumPy的数组&#xff08;ndarray&#xff09;对象是一个快速且灵活的多维数组对象&#xff0c;用于存储…

power bi-all 相关函数

power bi-all 相关函数 1. all 函数2. allselected 函数3. allexcept&#xff08;&#xff09;函数4. allnoblankrow() 函数 1. all 函数 作用&#xff1a; 清除筛选返回&#xff1a;清除筛选后的表格或列总结 当all参数为表时&#xff0c;忽略所有的筛选条件&#xff0c;无论…

github连接不上的解决方案(持续更新)

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于大模型算法的研究与应用。曾担任百度千帆大模型比赛、BPAA算法大赛评委,编写微软OpenAI考试认证指导手册。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。授权多项发明专利。对机器学…