CSS|13 position属性

news/2024/12/25 13:12:03/

position位置

position表示位置，主要用于实现对元素的定位。
在CSS中定位分为三种：

  • position:fixed; 固定定位
  • position:relative; 相对定位
  • position:absolute; 绝对定位

注意：
在使用定位属性时，一定要配合定位的坐标来使用！
left:表示定位的元素离左边多远
right:表示定位的元素离右边多远
top:表示定位的元素离上边多远
bottom:表示定位的元素离下边多远

固定定位

1.语法：
position:fixed;
固定定位，它是相对于浏览器窗口进行定位。不管页面如何进行定位，固定定位元素显示的位置不会改变！

2.特点：
- 固定定位元素它脱离了标准文档流
- 固定定位元素的层级比校准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面的元素
- 固定定位元素它不再占用空间
- 固定定位元素它显示的位置不会随着浏览器滚动而滚动

案例1：固定定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>固定定位</title><style type="text/css">css">*{margin: 0;padding: 0;}p{width: 100px;height: 100px;background-color: #f00;/*给p标签增加定位的属性不加这个之前，p标签被图片遮住了*/position: fixed;}</style>
</head>
<body><p></p><img src="../../lesson_02/img/IMG_0425.JPG" alt=""><img src="../../lesson_02/img/IMG_0425.JPG" alt=""><img src="../../lesson_02/img/IMG_0425.JPG" alt=""><img src="../../lesson_02/img/IMG_0425.JPG" alt=""><img src="../../lesson_02/img/IMG_0425.JPG" alt="">
</body>
</html>

position: fixed; 需要配合 top、right、bottom 或 left 属性来指定元素的具体位置，如果没有设置，就默认固定在左上角，
在这里插入图片描述

案例2：使用固定定位来实现返回顶部的按钮

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用固定定位来实现返回顶部的按钮</title><style type="text/css">css">*{margin: 0;padding: 0;}a{width: 60px;height: 60px;/*将行内元素转换成跨级元素这样换了之后，a标签中的文本紧密了些*/display: block;background-color: #ccc;text-align: center;line-height: 30px;/*去除下划线格式*/text-decoration: none;color: white;font-weight: bold;/*使用固定定位*/position: fixed;right: 30px;bottom: 100px;}</style>
</head>
<body><h2 id="catalogue">开始</h2><a href="#catalogue"> 返回<br/>顶部</a><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt="">
</body>
</html>

使用下面代码就将a标签固定在右下角位置，距离底部100像素，距离右边30像素

position: fixed;
right: 30px;
bottom: 100px;

关于回到顶部功能：a的href设置为要定位的标签的id就行。

<h2 id="catalogue">开始</h2>
<a href="#catalogue"> 返回<br/>顶部</a>

在这里插入图片描述

案例3：使用固定定位来实现顶部的导航栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用固定定位来实现顶部的导航栏</title><style type="text/css">css">*{margin: 0;padding: 0;}.nav{width: 100%;height: 60px;background-color: #222222;/*使用固定定位*/position: fixed;left: 0px;top: 0px;}.nav .inner_c{width: 1000px;height: 60px;margin: 0px auto;background-color: #f00;}ul{/*清除无序列表前面的项目符号*/list-style: none;}ul li{/*左浮动*/float: left;width: 100px;height: 60px;line-height: 60px;text-align: center;}ul li a{display: block;width: 100px;height: 60px;text-decoration: none;color: white;font-weight: bold;}ul li a:hover{background-color: gold;}body{padding-top: 60px;}</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><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt=""><img src="../img/jyff.JPG" alt="">
</body>
</html>

将导航栏固定在页面左上角
在这里插入图片描述

相对定位

1.语法：
position:relative;
相对定位是相对于“原来的自己”来进行定位！

2.特点：
- 相对定位元素它没有脱离标准文档流
- 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
- 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
- 相对定位元素它会将标准文档流中的元素压盖住
- 相对定位元素的定位坐标值可以是负数

案例1：相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位</title><style type="text/css">css">*{margin: 0;padding: 0;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;padding-left: 100px;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/*相对定位属性 相对原来的位置*/position: relative;/*设置定位的坐标*/left: -100px;}.div3{background-color: #00f;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

大盒子box设置padding-left: 100px，所以初始所有div都在框线右边一点，然后div2也就是绿盒子，设置了相对位置left: -100px;，就是相对原本的位置左移100像素
在这里插入图片描述

案例2：相对定位案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位案例</title><style type="text/css">css">/*使用属性选择器来匹配元素*/input[type="text"]{font-size: 36px;}input[type="button"]{position: relative;top: 6px;  }</style>
</head>
<body><input type="text" name=""><input type="button" value="检测用户名">
</body>
</html>

距离顶部6像素，底部尽量和文本框一样齐
在这里插入图片描述

绝对定位

1.语法：
position:absolute;
绝对定位是相对于“祖先定位元素”来进行定位！

2.什么是祖先定位元素？
绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素进行定位；但是如果他的父元素没有设置定位属性，那么它就会取查找其父元素的上一级元素是否设置了定位的属性，如果有设置就相当于其父元素的上一级元素进行定位，但是如果没有设置的话，那么就会继续往上一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位！
祖先定位元素没有设置position，则相对于body浏览器窗口。

3.特点：
- 绝对定位元素它脱离了标准文档流
- 绝对定位元素它不占用空间
- 绝对定位元素它会压盖住标准文档流重点的元素
- 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位，还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性。“子绝父相”子元素设置绝对定位，父元素设置相对定位。

4.问题：如果当前元素的父元素与其爷爷元素都设置了相对定位，那么请回答当前的绝对定位元素它会相对于“谁”来进行定位？
答：
当前的绝对定位元素它会相对于其“父元素”来进行定位，也就是说当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再去查找上一级元素。

案例1：绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">css">*{margin: 0;padding: 0;}.box{width: 600px;border: 1px solid #000;margin:100px auto;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/*绝对定位*/position: absolute;/*父元素body没有设置position，则相对于body浏览器窗口*/top: 0px;right: 0px;}.div3{background-color: #00f;}</style>
</head>
<body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div>
</body>
</html>

父元素body没有设置position，则相对于body浏览器窗口
在这里插入图片描述

案例2：绝对定位1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">css">*{margin: 0;padding: 0;}.box{width: 600px;border: 1px solid #000;margin:100px auto;/*给其设置一个固定定位*/position: fixed;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;}.div2{background-color: #0f0;/*绝对定位*/position: absolute;/*父元素div .boxp设置相对文职，则相对于boxp盒子设置位置，离上边0像素，离右边0像素*/top: 0px;right: 0px;}.div3{background-color: #00f;}.boxp{width: 600px;border: 3px solid skyblue;margin:100px auto;/*给其设置一个相对定位*/position: relative;}</style>
</head>
<body><div class="boxp"><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></div>
</body>
</html>

box固定在左上，因为设置了margin，所以随着窗口居中，上下margin为100px。
boxp设置了相对位置，但没有设置小属性，所以相对原来位置还是不变的。
div2设置了top: 0px;right: 0px;，相对祖先定位元素也就是box，div在box的右上角。
在这里插入图片描述
如果想要div2在boxp的右上角，就注释box中的位置代码。
在这里插入图片描述

案例3：使用绝对定位来实现拉手网上的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用绝对定位来实现拉手网上的效果</title><style type="text/css">css">*{margin: 0;padding: 0;}.box{width: 320px;height: 240px;border: 1px solid #000;margin: 100px auto;/*相对定位*/position: relative;}.box span{/*绝对定位*/position: absolute;left: 0px;top: -10px;}</style>
</head>
<body><div class="box"><span><img src="../img/myy.png" alt=""></span><div><img src="../img/bao.jpg" width="320" height="240" alt=""></div></div>
</body>
</html>

就是将‘免预约’图片(myy.png)，放到bao.jpg的左上角，也就是相对bao.jpg元素设置位置，所以box设置相对位置，然后span标签设置左上位置，top是-10px，看图片里超出bao.jpg图片10个像素。

在这里插入图片描述


http://www.ppmy.cn/news/1557999.html

相关文章

多边形内角问题@三角形的基本性质@平面镶嵌问题

多边形内角问题@三角形的基本性质@平面镶嵌问题

文章目录 abstract符号说明多边形正多边形正 n n n边形正多边形中心角 多边形内角和外角多边形内角和定理证明证法一证法二证法三 多边形外角 多边形的对角线平面镶嵌&#x1f47a;全等多边形平面镶嵌拓展正多边形镶嵌平面用一种正多边形镶嵌用两种正多边形镶嵌 使用三种正多边…
阅读更多...
SSM 架构下 Vue 电脑测评系统：为电脑性能评估赋能

SSM 架构下 Vue 电脑测评系统：为电脑性能评估赋能

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常适…
阅读更多...
sql server 查询对象的修改时间

sql server 查询对象的修改时间

sql server 不能查询索引的最后修改时间&#xff0c;可以查询表&#xff0c;存储过程&#xff0c;函数&#xff0c;pk 的最后修改时间使用以下语句 select * from sys.all_objects ob order by ob.modify_date desc 但可以参考一下统计信息的最后修改时间&#xff0c;因为索…
阅读更多...
[工具]GitHub Copilot 直接提供免费额度了

[工具]GitHub Copilot 直接提供免费额度了

有福了&#xff01; GitHub Copilot 直接提供免费额度——每个月享 2000个代码提示完成额度&#xff08;每个工作日大约80个&#xff09;&#xff0c;以及 50个聊天请求。后台是访问 GPT-4o 和 Claude 3.5 Sonnet 模型。 插件支持VS Code、VS 2022、JetBrains、... 这下 Curs…
阅读更多...
ffmpeg: stream_loop报错 Error while filtering: Operation not permitted

ffmpeg: stream_loop报错 Error while filtering: Operation not permitted

问题描述 执行ffmpeg命令的时候&#xff0c;报错&#xff1a;Error while filtering: Operation not permitted 我得命令如下 ffmpeg -framerate 25 -y -i /data/workerspace/mtk/work_home/mtk_202406111543-l9CSU91H1f1b3/tmp/%08d.png -stream_loop -1 -i /data/workerspa…
阅读更多...
从零开始C++棋牌游戏开发之第一篇：C++ 游戏开发环境搭建与工具简介

从零开始C++棋牌游戏开发之第一篇：C++ 游戏开发环境搭建与工具简介

前言&#xff1a;作者的感想 每一次选择开始一项新技能的学习&#xff0c;总会让人感到既兴奋又有些许忐忑。C 游戏开发&#xff0c;尤其是针对棋牌类游戏规则实现的开发&#xff0c;更是一个有趣而充满挑战的领域。作为一名开发者&#xff0c;我深知面对 C 时的那种 "既…
阅读更多...
【工作流】评估自我的交付能力

【工作流】评估自我的交付能力

2024年12完成了***管理平台的第二个版本开发 这个工作期间&#xff1a; 工作 计划工时比实际工时要多了75%左右&#xff08;一个多月&#xff09;&#xff0c;造成这次工时超出的主要因素是&#xff1a; 1.1、&#xff08;次要&#xff09;少部分是因为其它临时任务干扰&…
阅读更多...
云原生大数据计算服务 MaxCompute 是什么？

云原生大数据计算服务 MaxCompute 是什么？

什么是 MaxCompute&#xff1f; MaxCompute 是一种面向海量数据的云原生计算平台&#xff0c;专注于解决大规模数据存储、查询和分析问题。它以分布式架构为基础&#xff0c;支持多种计算模型&#xff0c;包括 SQL、机器学习、MapReduce 等&#xff0c;能够帮助用户在短时间内…
阅读更多...
最新文章

Copyright @ 2022~2023