第八讲_css定位

css定位

  • 1. css定位介绍
  • 2. 静态定位(static)
  • 3. 相对定位(relative)
  • 4. 绝对定位(absolute)
  • 5. 固定定位(fixed)
  • 6. 粘性定位(sticky)

1. css定位介绍

在 css 中,可以通过 position 设置元素的定位模式,常见的定位模式:

  1. static(默认值):按照正常的文本流布局。
  2. relative:相对定位。
  3. absolute:绝对定位。
  4. fixed:固定定位。
  5. sticky:粘性定位。

position为非static时,可以通过topbottomrightleft设置元素的偏移量。

2. 静态定位(static)

静态定位是元素的默认定位方式,按照标准流特性摆放位置,没有边偏移。

3. 相对定位(relative)

  • 相对定位的参考点是自己原来的位置。
  • 相对定位不会脱离标准流,继续占有原来的位置。元素位置的变化,只是视觉效果上的变化,不会对其他元素产生任何影响。
  • left 和 right 不能同时使用,top 和 bottom 不能同时使用。
<style>.first {height: 100px;width: 100px;background-color: aqua;position: relative;top: 20px;left: 20px;
}
.second {height: 100px;width: 100px;background-color: blueviolet;
}
</style><div class="parent"><div class="first"></div><div class="second"></div>
</div>

4. 绝对定位(absolute)

  • 绝对定位的参考点是它的包含块。
    • 对于没有脱离标准流的元素,它的包含块就是父元素。
    • 对于脱离标准流的元素,它的包含块是第一个拥有定位属性的祖先元素。
  • 绝对定位会脱离标准流,对后面的兄弟元素、父元素有影响。
  • 绝对定位和浮动不能同时设置,如果同时设置,浮动失效。
  • left 和 right 不能同时使用,top 和 bottom 不能同时使用。
<style>
.parent {position: relative;
}
.first {height: 100px;width: 100px;background-color: aqua;position: absolute;top: 20px;left: 20px;/* 浮动不生效 */float: right;
}
.second {height: 100px;width: 100px;background-color: blueviolet;
}
</style><div class="parent"><!-- 父元素设置了定位,所以父元素就是它的包含块 --><div class="first"></div><!-- .first 设置了绝对定位,脱离了标准流。.second 就会占了它的位置 -->><div class="second"></div>
</div>

5. 固定定位(fixed)

  • 固定定位的参考点是视口。
  • 固定定位会脱离标准流,对后面的兄弟元素、父元素有影响。
  • left 和 right 不能同时使用,top 和 bottom 不能同时使用。
  • 固定定位和浮动不能同时设置,如果同时设置,浮动失效。
<style>
.container {width: 100px;height: 100px;background-color: red;position: fixed;left: 200px;top: 200px;
}</style><div class="container"></div>

ps: 在浏览器打开上述代码,视口就是浏览器,红色的块在距离浏览器顶部200px,左侧200px的位置。

6. 粘性定位(sticky)

  • 粘性定位的参考点是离它最近的拥有“滚动机制”的祖先元素。
  • 粘性定位不会脱离标准流,它是专门用于窗口滚动时的新定位方式。
<style>
.container {width: 500px;height: 200px;/* 内容超出显示滚动条 */overflow: scroll;
}.fisrt {height: 100px;background-color: red;position: sticky;top: 20px;
}
.second {height: 100px;background-color: darkorchid;
}
.third {height: 100px;background-color: blue;
}
</style><div class="container"><div class="fisrt"></div><div class="second"></div><div class="third"></div>
</div>

ps: 只要设置了定位的元素,其显示层级比普通元素高

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

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

相关文章

006集 正则表达式 re 应用实例—python基础入门实例

正则表达式指预先定义好一个 “ 字符串模板 ” &#xff0c;通过这个 “ 字符串模 板” 可以匹配、查找和替换那些匹配 “ 字符串模板 ” 的字符串。 Python的中 re 模块&#xff0c;主要是用来处理正则表达式&#xff0c;还可以利用 re 模块通过正则表达式来进行网页数据的爬取…

18. 从零用Rust编写正反向代理, 主动式健康检查源码实现

wmproxy wmproxy是由Rust编写&#xff0c;已实现http/https代理&#xff0c;socks5代理&#xff0c; 反向代理&#xff0c;静态文件服务器&#xff0c;内网穿透&#xff0c;配置热更新等&#xff0c; 后续将实现websocket代理等&#xff0c;同时会将实现过程分享出来&#xff…

Python陷阱-如何安全地删除列表元素?

一个常见的任务是在一个列表上迭代&#xff0c;并根据条件删除一些元素。本文将展示如何完成该任务的不同方法&#xff0c;同时展示一些需要避免的陷阱。 假设我们需要修改列表a&#xff0c;并且必须删除所有不是偶数的项。首先实现辅助函数even(x)来确定一个数字x是否是偶数: …

LT8911EX LVDS 转 eDP

概述 Lontium LT8911EX 是 LVDS 至 eDP 转换器&#xff0c;具有单端口或双端口可配置 LVDS 接收器&#xff0c;具有 1 个时钟通道和多达 8 个数据通道&#xff0c;每个数据通道的最大工作速率为 1.2Gbps&#xff0c;最大输入带宽为 9.6Gbps。该转换器对输入LVDS数据进行反串行…

商用净水器行业分析:到2025年市场零售规模将接近500亿元

商用净水器与家庭净水器相差无几&#xff0c;只是出水量大小不同。一般商业净水器都采用中央净水器和集成净水器这两种&#xff0c;这样不仅可以解决工业用水&#xff0c;还可解决工人日常饮用水、沐浴用水和洗涤用水等生活用水问题。 目前我国中央水处理整机依然处于市场发展的…

【小黑嵌入式系统第十四课】μC/OS-III程序设计基础(三)——信号量(任务同步资源同步)、事件标记组(与或多个任务)

上一课&#xff1a; 【小黑嵌入式系统第十三课】PSoC 5LP第二个实验——中断控制实验 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能 文章目录 1 信号量1.1 简介1.2…

DNS:解析互联网的“导航系统”

引言&#xff1a; 在互联网时代&#xff0c;我们每天都在使用各种网站和服务&#xff0c;但很少有人真正了解这些网站和服务是如何被找到和访问的。这背后有一个被称为DNS&#xff08;域名系统&#xff09;的“导航系统”&#xff0c;它负责将人类可读的域名转换为计算机可识别…

学习笔记之——3D Gaussian Splatting源码解读

之前博客对3DGS进行了学习与调研 学习笔记之——3D Gaussian Splatting及其在SLAM与自动驾驶上的应用调研-CSDN博客文章浏览阅读450次。论文主页3D Gaussian Splatting是最近NeRF方面的突破性工作&#xff0c;它的特点在于重建质量高的情况下还能接入传统光栅化&#xff0c;优…

对比两个json对象有那几个字段被修改,并返回有改动的字段内容

如果您想比较两个 JSON 对象&#xff0c;找出哪些字段发生了变化&#xff0c;并返回发生变化的字段及其新的值&#xff0c;您可以编写一个函数来递归比较对象。以下是一个 TypeScript 示例&#xff1a; type JSONValue string | number | boolean | null | JsonObject | Json…

LNMP平台对接redis服务

目录 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 4、修改 php 配置文件 5、测试连接 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 官网&#xff1a;http://redis.io/ 下载包&#xff1a; https://codeload.github.com/phpredis/p…

C++:常量

const的最初动机 const的使用方法 使用const的好处是允许指定一种语义上的约束&#xff0c;即某种对象不能被修改&#xff0c;且由编译器具体实施这种约束。 const声明格式&#xff1a;const 类型名 对象名;修饰普通变量&#xff0c;时期不能被随意修改 【注意】1.C中的const…

探索大模型时代下的文档识别与分析【GPT4-V带来的挑战与机遇】

中国图象图形学学会青年科学家会议是由中国图象图形学学会青年工作委员会发起的学术会议。本会议面向国际学术前沿与国家战略需求&#xff0c;致力于支持图象图形领域的优秀青年学者&#xff0c;为青年学者们提供学术交流与研讨的平台&#xff0c;促进学者之间的交流与合作。会…

深入理解C#中的引用类型、引用赋值以及 `ref` 关键字

深入理解C#中的引用类型、引用赋值以及 ref 关键字 在C#编程中&#xff0c;理解引用类型、引用赋值以及 ref 关键字的使用对于编写高效、可靠的代码至关重要。本文将深入探讨这些概念&#xff0c;帮助您更好地理解C#的工作原理。 引用类型简介 在C#中&#xff0c;所有的类型都…

MySQL的事务机制

一、事务机制简述 事务机制,避免写入直接操作数据文件&#xff1b;利用日志来实现间接写入&#xff0c;与事务有关的, redo日志与undo日志&#xff1b;sql语句操作记录复制到undo日志然后增删改查操作的结果会记录在redo日志&#xff0c;如果操作没有什么问题就把数据同步到数…

【MySQL】MySQL版本8+ 的 with recursive 递归语法初次使用

力扣题 1、题目地址 1613. 找到遗失的ID 2、模拟表 表&#xff1a;Customers Column NameTypecustomer_idintcustomer_namevarchar customer_id 是该表主键.该表第一行包含了顾客的名字和 id. 3、要求 编写一个解决方案, 找到所有遗失的顾客 id。遗失的顾客 id 是指那些…

代码随想录算法训练营第三十天 | 332.重新安排行程、51. N皇后、37. 解数独

332.重新安排行程 题目链接&#xff1a;332.重新安排行程 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的…

安卓fragment监听文本内容取值

首先需要自己定义一个最大的BaseFragment&#xff0c;继承这个BaseFragment并在骑宠填充你需要绑定的Fragment class LoginFragment : BaseFragment<FragmentLoginBinding>(R.layout.fragment_login) { }顶自己需要获取的值 private lateinit var account: EditTextpriv…

Prometheus C++使用教程

1 简介 Prometheus是一个包括时序数据库的工具&#xff0c;可以将指标Metric数据传入Prometheus&#xff0c;然后通过Grafana可视化出来。 Grafana是一个通用的数据看板&#xff0c;可以通过自定义的看板&#xff0c;实时的观察各类指标的变化。 2 安装Prometheus 2.1 安装d…

综合指南:理解气体检测仪的关键功能和单位换算

随着科技的飞速发展&#xff0c;气体检测仪在各行各业中的应用已十分普遍&#xff0c;其主要用途是检测环境中的气体浓度。 1、检测气体纯度 主要用于气体储罐、管道等储运设备中检测气体的纯度&#xff0c;一般都是专门针对高纯气体的浓度值进行检测&#xff0c;常见的如氩气…

C语言数组基础知识

目录 一维数组&#xff1a; 一维数组的创建&#xff1a; 一维数组的访问&#xff1a; 一维数组在内存中的存储&#xff1a; 二维数组&#xff1a; 二维数组的创建&#xff1a; 二维数组的初始化&#xff1a; 二维数组的使用&#xff1a; 二维数组在内存中的存储&#x…