前端学习<二>CSS基础——08-CSS属性:定位属性

news2024/11/26 16:56:11

CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。

     position: absolute;  <!-- 绝对定位 -->
 ​
     position: relative;  <!-- 相对定位 -->
 ​
     position: fixed;     <!-- 固定定位 -->
 ​

下面逐一介绍。

相对定位

相对定位:让元素相对于自己原来的位置,进行位置调整(可用于盒子的位置微调)。

我们之前学习的背景属性中,是通过如下格式:

     background-position:向右偏移量 向下偏移量;

但这回的定位属性,是通过如下格式:

     position: relative;
     left: 50px;
     top: 50px;

相对定位的举例:

 <!doctype html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <meta name="Generator" content="EditPlus®">
   <meta name="Author" content="">
   <meta name="Keywords" content="">
   <meta name="Description" content="">
   <title>Document</title>
 ​
     <style type="text/css">
 ​
         body{
             margin: 0px;
         }
 ​
         .div1{
             width: 200px;
             height: 200px;
             border: 1px solid red;
         }
 ​
         .div2{
             position: relative;/*相对定位:相对于自己原来的位置*/
             left: 50px;/*横坐标:正值表示向右偏移,负值表示向左偏移*/
             top: 50px;/*纵坐标:正值表示向下偏移,负值表示向上偏移*/
 ​
             width: 200px;
             height: 200px;
             border: 1px solid red;
         }
     </style>
  </head>
 ​
  <body>
 ​
     <div class="div1">有生之年</div>
     <div class="div2">狭路相逢</div>
 ​
  </body>
 ​
 </html>

效果:

相对定位不脱标

相对定位:不脱标,老家留坑,别人不会把它的位置挤走

也就是说,相对定位的真实位置还在老家,只不过影子出去了,可以到处飘。

相对定位的用途

如果想做“压盖”效果(把一个div放到另一个div之上),我们一般不用相对定位来做。相对定位,就两个作用:

  • (1)微调元素

  • (2)做绝对定位的参考,子绝父相

相对定位的定位值

  • left:盒子右移

  • right:盒子左移

  • top:盒子下移

  • bottom:盒子上移

PS:负数表示相反的方向。

↘:

     position: relative;
     left: 40px;
     top: 10px;

↙:

     position: relative;
     right: 100px;
     top: 100px;

↖:

     position: relative;
     right: 100px;
     bottom: 100px;

↗:

     position: relative;
     left: 200px;
     bottom: 200px;
 ​

如果要描述上面这张图的方向,我们可以首先可以这样描述:

	position: relative;
	left: 200px;
	top: 100px;

因为left: 200px等价于right: -200px,所以这张图其实有四种写法。

绝对定位

绝对定位:定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示,纵坐标用top或者bottom表示。

格式举例如下:

	position: absolute;  /*绝对定位*/
	left: 10px;  /*横坐标*/
	top/bottom: 20px;  /*纵坐标*/

绝对定位脱标

绝对定位的盒子脱离了标准文档流。

所以,所有的标准文档流的性质,绝对定位之后都不遵守了。

绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要display:block就可以设置宽、高了。

绝对定位的参考点(重要)

(1)如果用top描述,那么参考点就是页面的左上角,而不是浏览器的左上角:

(2)如果用bottom描述,那么参考点就是浏览器首屏窗口尺寸(好好理解“首屏”二字),对应的页面的左下角:

为了理解“首屏”二字的含义,我们来看一下动态图:

问题:

答案:

用bottom的定位的时候,参考的是浏览器首屏大小对应的页面左下角。

以盒子为参考点

一个绝对定位的元素,如果父辈元素中也出现了已定位(无论是绝对定位、相对定位,还是固定定位)的元素,那么将以父辈这个元素,为参考点。

如下:(子绝父相)

以下几点需要注意。

(1) 要听最近的已经定位的祖先元素的,不一定是父亲,可能是爷爷:

		<div class="box1">        相对定位
			<div class="box2">    没有定位
				<p></p>           绝对定位,将以box1为参考,因为box2没有定位,box1就是最近的父辈元素
			</div>
		</div>

再比如:

		<div class="box1">        相对定位
			<div class="box2">    相对定位
				<p></p>           绝对定位,将以box2为参考,因为box2是自己最近的父辈元素
			</div>
		</div>

(2)不一定是相对定位,任何定位,都可以作为儿子的参考点:

子绝父绝、子绝父相、子绝父固,都是可以给儿子定位的。但是在工程上,如果子绝、父绝,没有一个盒子在标准流里面了,所以页面就不稳固,没有任何实战用途。

工程应用:

子绝父相”有意义:这样可以保证父亲没有脱标,儿子脱标在父亲的范围里面移动。于是,工程上经常这样做:

父亲浮动,设置相对定位(零偏移),然后让儿子绝对定位一定的距离。

(3)绝对定位的儿子,无视参考的那个盒子的padding:

下图中,绿色部分是父亲div的padding,蓝色部分p是div的内容区域。此时,如果div相对定位,p绝对定位,那么, p将无视父亲的padding,在border内侧为参考点,进行定位:

工程应用:

绝对定位非常适合用来做“压盖”效果。我们来举个lagou.com上的例子。

现在有如下两张图片素材:

要求作出如下效果:

代码实现如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			margin: 100px;
			width: 308px;
			height: 307px;
			border: 1px solid #FF7E00;
			position: relative;  /*子绝父相*/

		}
		.box .image img{
			width: 308px;
			height: 196px;
		}
		.box .dtc{
			display: block;  /*转为块级元素,才能设置span的宽高*/
			width: 52px;
			height: 28px;
			background-image: url(http://img.smyhvae.com/20180116_1115.png);
			background-position: -108px 0px; /*这里用到了精灵图*/
			position: absolute;  /*采用绝对定位的方式,将精灵图盖在最上层*/
			top: -9px;
			left: 13px;
		}
		.box h4{
			background-color: black;
			color: white;
			width:308px;
			height: 40px;
			line-height: 40px;
			position: absolute;
			top: 156px;
		}
	</style>
</head>
<body>
	<div class="box">
		<span class="dtc"></span>
		<div class="image">
			<img src="http://img.smyhvae.com/20180116_1116.jpg" alt="">
		</div>
		<h4>广东深圳宝安区建安一路海雅缤纷城4楼</h4>
	</div>
</body>
</html>

代码解释如下:

  • 为了显示“多套餐”那个小图,我们需要用到精灵图。

  • “多套餐”下方黑色背景的文字都是通过“子绝父相”的方式的盖在大海报image的上方的。

代码的效果如下:

让绝对定位中的盒子在父亲里居中

我们知道,如果想让一个标准流中的盒子在父亲里居中(水平方向看),可以将其设置margin: 0 auto属性。

可如果盒子是绝对定位的,此时已经脱标了,如果还想让其居中(位于父亲的正中间),可以这样做:

	div {
		width: 600px;
		height: 60px;
		position: absolute;  绝对定位的盒子
		left: 50%;           首先,让左边线居中
		top: 0;
		margin-left: -300px;  然后,向左移动宽度(600px)的一半
	}

如上方代码所示,我们先让这个宽度为600px的盒子,左边线居中,然后向左移动宽度(600px)的一半,就达到效果了。

我们可以总结成一个公式:

left:50%; margin-left:负的宽度的一半

固定定位

固定定位:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。

备注:IE6不兼容。

用途1:网页右下角的“返回到顶部”

比如我们经常看到的网页右下角显示的“返回到顶部”,就可以固定定位。

	<style type="text/css">
		.backtop{
			position: fixed;
			bottom: 100px;
			right: 30px;
			width: 60px;
			height: 60px;
			background-color: gray;
			text-align: center;
			line-height:30px;
			color:white;
			text-decoration: none;   /*去掉超链接的下划线*/
		}
	</style>

用途2:顶部导航条

我们经常能看到固定在网页顶端的导航条,可以用固定定位来做。

需要注意的是,假设顶部导航条的高度是60px,那么,为了防止其他的内容被导航条覆盖,我们要给body标签设置60px的padding-top。

顶部导航条的实现如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
body{
			/*为什么要写这个?*/
			/*不希望我们的页面被nav挡住*/
			padding-top: 60px;
			/*IE6不兼容固定定位,所以这个padding没有什么用,就去掉就行了*/
			_padding-top:0;
		}
		.nav{
			position: fixed;
			top: 0;
			left: 0;
	 		width: 100%;
			height: 60px;
			background-color: #333;
			z-index: 99999999;
		}
		.inner_c{
			width: 1000px;
			height: 60px;
			margin: 0 auto;

		}
		.inner_c ul{
			list-style: none;
		}
		.inner_c ul li{
			float: left;
			width: 100px;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}
		.inner_c ul li a{
			display: block;
			width: 100px;
			height: 60px;
			color:white;
			text-decoration: none;
		}
		.inner_c ul li a:hover{
			background-color: gold;
		}
		p{
			font-size: 30px;
		}
		.btn{
			display: block;
			width: 120px;
			height: 30px;
			background-color: orange;
			position: relative;
			top: 2px;
			left: 1px;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="inner_c">
			<ul>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
				<li><a href="#">网页栏目</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

5、z-index属性:

z-index属性:表示谁压着谁。数值大的压盖住数值小的。

有如下特性:

(1)属性值大的位于上层,属性值小的位于下层。

(2)z-index值没有单位,就是一个正整数。默认的z-index值是0。

(3)如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

(4)只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。而浮动的元素不能用

(5)从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。

针对(1)(2)(3)条,举例如下:

这是默认情况下的例子:(div2在上层,div1在下层)

现在加一个z-index属性,要求效果如下:

第五条分析:

z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时,我们可以用这个z-index属性决定,谁处于最上方。也就是层级的应用。

层级:

(1)必须有定位(除去static)

(2)用z-index来控制层级数。

写在最后:希望大家可以点个关注点个赞,这对up真的很重要!谢谢!

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

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

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

相关文章

用DataGrip连接hive时报错:User: root is not allowed to impersonate plck5,解决方法

你可以尝试关闭主机校验 修改hive安装目录下conf/hive-site.xml,将hive.server2.enable.doAs设置成false <property><name>hive.server2.enable.doAs</name><value>false</value><description>Setting this property to true will have H…

常用类(日期时间)

目录 一、JDK 8之前的日期时间API1.1、System类中获取时间戳的方法1.2、Java中两个Date类的使用1.3、SimpleDateFormat的使用1.4、Calendar日历类的使用 二、JDK8中日期时间API的介绍2.1、LocalDate、LocalTime、LocalDateTime的使用2.2、Instant类的使用2.3、DateTimeFormatte…

OKCC的API资源管理平台怎么用?

API资源管理平台&#xff0c;重点是“资源”管理平台&#xff0c;不是API接口管理平台。 天天讯通推出的API资源管理平台&#xff0c;类似昆石的VOS系统&#xff0c;区别是VOS是SIP资源管理系统&#xff0c;我们的API资源管理平台是API资源管理系统&#xff08;AXB、AX、回拨AP…

Spring Boot 统一数据返回格式 分析 和 处理

目录 实现统一数据格式 测试 原因分析 解决方案 &#x1f3a5; 个人主页&#xff1a;Dikz12&#x1f4d5;格言&#xff1a;吾愚多不敏&#xff0c;而愿加学欢迎大家&#x1f44d;点赞✍评论⭐收藏 实现统一数据格式 统⼀的数据返回格式使⽤ ControllerAdvice 和 Response…

达梦数据库新手上路排坑

数据库安装 这个没啥说的&#xff0c;按照官网教程操作&#xff0c;我使用的是docker进行安装 下载文件docker文件 官方下载地址- load -i dm8****.tar (注意修改为当前下载的文件)达梦官方文档注意修改为当前版本 docker run -d -p 5236:5236 --name dm8 --privilegedtrue -…

京东云4核16G服务器优惠价格26元1个月、658元1年、三年3098元

京东云4核16G服务器优惠价格26元1个月、80元3个月、658元1年、3098元三年&#xff0c;配置为&#xff1a;轻量云主机4C16G-220G SSD系统盘-5M带宽-500G月流量&#xff0c;京东云优惠活动 atengyun.com/go/jd 可以查看京东云服务器详细配置和精准报价单&#xff0c;活动打开如下…

电子显微镜——相机

相机种类 相机种类繁多,下面根据相机接口和图像传感器类型进行分类。 根据数据接口分类 1. USB相机 USB相机通常可以指代多种不同类型的USB接口相机,其中包括UVC(USB Video Class)相机和U3V(USB3 Vision)相机等,它们通常使用SOC进行开发。以下是它们的区别和特点: …

香港服务器与SEO的关系(香港服务器对SEO影响大吗?)

香港服务器与 SEO 的关系是一个备受关注的话题&#xff0c;不少站长在选择了香港服务器后&#xff0c;便会疑问&#xff1a;香港服务器对SEO的影响是否显著?那么&#xff0c;在这里就跟大家聊聊两者的关系以及影响大小。 其实&#xff0c;不少站长对 SEO 的这种担忧和想法是片…

测开——测试用例设计题

1.测试手机的短信功能需要考虑哪些测试点&#xff1f; 考测试思维 是否能正常打开或进入短信界面短信可以正常编辑、修改、删除短信可以正常发送、接收短信页面的字体、颜色显示是否正常【UI界面 手机设置了字体颜色 大小是否同步】短信的字体是否能够调整同时给多个人发短信…

JVM(一)——内存结构

一. 前言 1、什么是 JVM? 1&#xff09;定义&#xff1a; Java Virtual Machine - java 程序的运行环境&#xff08;java 二进制字节码的运行环境&#xff09; 2&#xff09;好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收功能数组下标越…

二十九 超级数据查看器 讲解稿 查询复用

二十九 超级数据查看器 讲解稿 查询复用 ​点击此处 以新页面 打开B站 播放当前教学视频 点击访问app下载页面 百度手机助手 下载地址 大家好&#xff0c;今天我们讲一下超级数据查看器的查询复用功能&#xff0c;这是新版本要增加的功能&#xff0c;这讲是预告。 先介绍…

【面试那些事儿】浏览器键入网址到网页显示,期间发生了什么

当用户在浏览器中键入网址并按下回车键后&#xff0c;直到最终显示出完整的网页内容&#xff0c;这一过程中经历了哪些步骤呢&#xff1f; 这是一道经典的面试题&#xff0c;我们来看看具体有哪些阶段。 1. 解析URL 浏览器首先解析用户输入的URL&#xff0c;判断它的语法和协…

这本JCR一区期刊被On Hold,投稿需谨慎!

ENVIRONMENTAL SCIENCE AND POLLUTION RESEARCH 《环境科学与污染研究》 期刊官网&#xff1a;https://link.springer.com/journal/11356 【基础信息】 ISSN&#xff1a;0944-1344 eISSN&#xff1a;1614-7499 Index&#xff1a;SCIE IF(2022)&#xff1a;5.8 出版社&am…

Codigger用户篇:安全、稳定、高效的运行环境(二)

在当今数字化时代&#xff0c;随着云计算和大数据技术的飞速发展&#xff0c;分布式操作系统已成为支撑各类应用高效运行的关键基础设施。我们推出的Codigger分布式操作系统&#xff0c;正是为了满足用户对安全、稳定、高效私人应用运行环境的需求而精心设计的。上一次&#xf…

警惕.360勒索病毒:如何预防.360勒索病毒攻击

导言&#xff1a; 在网络安全领域&#xff0c;勒索病毒是一种非常危险的恶意软件&#xff0c;它以其独特的加密方式和高昂的赎金要求&#xff0c;给个人和企业带来了严重的损失。.360勒索病毒便是其中之一&#xff0c;它属于BeijingCrypt勒索病毒家族&#xff0c;具有高度的隐…

下水游泳耳机怎么选?六招教你避开陷阱,选对不选贵!

游泳耳机是许多水上爱好者的首选&#xff0c;它不仅为我们在水中的锻炼提供了音乐的陪伴&#xff0c;还帮助我们隔绝外界的嘈杂&#xff0c;让我们更加专注于自己的水上世界。然而&#xff0c;面对市场上众多的游泳耳机产品&#xff0c;如何选择一款既适合自己又性价比高的产品…

PyCharm代码一键格式化

前言 每次写完代码&#xff0c;就看见很多警告&#xff0c;乍一看还以为我又写了什么bug&#xff0c;原来是提示&#xff0c;啊放心了。可是我可见不得这些东西&#xff0c;因为代码里都是红红的下划线&#xff0c;好像在圈圈点点。。。 代码格式化 于是利用PyCharm里的快捷…

分布式图床项目

一、图床架构分析 二、后台数据处理框架 秒传: 如果上传的文件已经在服务器中存在了,就不需要二次上传了,但是服务器会对这个文件的引用计数加一,这样服务器就知道这个文件是多个人持有的。先对上传的文件进行 md5 校验来判断服务器中已经存在相同的文件了(同样的文件拿到…

【动手学深度学习】9.6 编码器和解码器

正如我们在 9.5节中所讨论的&#xff0c; 机器翻译是序列转换模型的一个核心问题&#xff0c; 其输入和输出都是长度可变的序列。 为了处理这种类型的输入和输出&#xff0c; 我们可以设计一个包含两个主要组件的架构&#xff1a; 第一个组件是一个编码器&#xff08;encoder&a…

AI 文字转语音工具以及它们的官网收集(值得收藏)

目前比较成熟的 AI 文字转语音工具以及它们的官网&#xff1a; 百度语音合成 (https://ai.baidu.com/tech/speech/tts)&#xff1a; 百度语音合成是百度 AI 推出的语音合成服务&#xff0c;支持多种语言和音色&#xff0c;可以用于语音播报、智能客服、有声阅读等场景。 阿里云…