友儿屋 - 友儿
type: channel
link: https://www.niuzheng.net/author/1/
description: 友儿
items: 一文读懂 Redis 哨兵：如何为数据安全 “站岗放哨”？
items: 超详细！ES 安装配置全攻略及 PHP 简单使用
items: 一步到位！Sphinx 安装配置全流程，PHP 轻松对接
items: CSS 按钮边框旋转动画：炫酷效果轻松实现
items: 轻松掌握屏幕坐标和窗口通信的实用技巧
items: 学会正确使用一些form表单元素：提升网页表单质量
items: iframe 元素与 Flash 嵌入在网页中的应用指南
items: 掌握 CSS 更多样式，丰富网页设计
items: 更多伪类选择器，丰富你的 CSS 工具箱
items: 网页元素定位的详细解读

一文读懂 Redis 哨兵：如何为数据安全 “站岗放哨”？
type: item
date: 2025-03-02T14:45:00+08:00
description: 宕机应对流程及关键问题探讨将宕机的master下线找一个slave作为master通知所有的slave连接新的master启动新的master和slave可能会出现N台全量复制或者部分复制谁来确认master宕机了,标准是什么？找一个master,怎么找？谁来找？修改配置后，原始的master恢复后，如何处理？哨兵简介哨兵(sentine)是一个分布式系统,用于对主从结构的每一个服务器进行监控,当出现故障时通过投票机制选择新的master并将所有slave连接到新的master上。哨兵的作用监控检查master和slave是否正常运行master存活检测、master与slave运行情况检测通知(提醒)当被监控的服务器出现问题时,向其他(哨兵间、客户端)发送通知。自动故障转移断开master与slave的连接,选取一个slave作为新的master,并将其他slave连接到新的master上，并告知客户端新的服务器地址。注意哨兵也是一台redis服务器,只是不提供数据服务。通常哨兵配置数量为单数,且数量不小于3。环境配置，准备工作使用vagrant搭建虚拟机下载vagrant,版本2.4.3,下载地址下载virtualbox,版本7.1.6,下载地址centos7镜像,下载地址安装cd D:\virtualmachine vagrant init centos/7 --box-version 2004.01 vagrant upvagrant配置和命令使用请移步以下的文章了解kong接入网关vagrantfile创建多个HostMac上下载安装Vagrant构建Redis哨兵模式一主二从架构搭配三哨兵配置主节点：127.0.0.1:63792个从节点：127.0.0.1:6380,127.0.0.1:63813个哨兵：127.0.0.1:26379,127.0.0.1:26380,127.0.0.1:26381开始安装# 登录到虚拟机 vagrant ssh # 切换到root用户 sudo su root # 备份并更新yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo yum clean all yum makecache yum update -y # 安装依赖包 sudo yum install -y gcc make tcl vim wget epel-release # 安装python3 yum install -y https://repo.ius.io/ius-release-el7.rpm yum install -y python36 python36-pip ln -s /usr/bin/python3.6 /usr/bin/python3 ln -s /usr/bin/pip3.6 /usr/bin/pip3 # 创建redis用户和组 groupadd redis useradd -g redis -s /sbin/nologin -M redis # 创建redis安装目录 mkidr -p /usr/local/software cd /usr/local/software # 下载redis安装包 wget https://download.redis.io/releases/redis-7.2.4.tar.gz # 解压和安装redis tar -zxvf redis-7.2.4.tar.gz cd redis-7.2.4/ sudo make sudo make test sudo make install # 配置redis mkdir -p /usr/local/software/redis-7.2.4/data/redis/6379/ mkdir -p /usr/local/software/redis-7.2.4/data/redis/6380/ mkdir -p /usr/local/software/redis-7.2.4/data/redis/6381/ mkdir -p /usr/local/software/redis-7.2.4/data/sentinel/26379/ mkdir -p /usr/local/software/redis-7.2.4/data/sentinel/26380/ mkdir -p /usr/local/software/redis-7.2.4/data/se…

超详细！ES 安装配置全攻略及 PHP 简单使用
type: item
date: 2025-02-28T15:23:00+08:00
description: 遭遇了 “黑天鹅” 事件近期真是遭遇了 “黑天鹅” 事件，公司因卷入非法问题，面临一系列棘手处理，无奈之下只得遣散全体员工，我也因此瞬间失业。原本按部就班的工作节奏戛然而止，每天醒来，看着毫无安排的一天，心里满是茫然与失落。与其在这种不确定中焦虑徘徊，倒不如主动出击，给自己找点事儿做。我打算投身到文档撰写中，既能有效填补空闲时间，让生活重回正轨，也能借此梳理过往积累的知识与经验，为未来求职筑牢根基，让这段意外失业的日子，不至于虚度 。回顾上一篇我们一同探索了 Sphinx 这个强大的全文搜索引擎，从它的功能特性到安装配置，相信大家对如何利用 Sphinx 搭建高效搜索系统有了清晰认知。不过技术的世界从不止步，在搜索领域，还有一位 “大咖”——Elasticsearch（简称 ES），它凭借分布式、高扩展、实时搜索等卓越优势，在企业级应用中大放异彩。这一篇，就让我们把目光聚焦 ES，深入剖析它的安装配置流程，探寻如何在 PHP 开发环境里，巧妙借助 ES 的力量，实现更智能、更高速的数据检索，解锁不一样的搜索体验。什么是Elasticsearch？它有什么优缺点？和 sphinx 相比，差异在哪里？Elasticsearch 是基于 Lucene 的分布式开源搜索引擎，用于全文搜索、数据分析等。优点是分布式、实时性强、功能丰富。缺点是硬件要求高、索引维护成本高。与 Sphinx 相比，ES 分布式和扩展性更好，功能更全面；Sphinx 在特定场景性能较好，配置相对简单，更适合中小规模数据。安装和配置Elasticsearch官网下载地址服务器：CentOS7,Java版本21.0.2(Elasticsearch基于Java开发)没有Java环境的自行去下载合适的版本，并把java加到环境变量中。sudo vim /etc/profile export JAVA_HOME=/www/server/java/jdk-21.0.2 export PATH=$JAVA_HOME/bin:$PATH安装# 创建存放Elasticsearch软件目录 mkdir -p /usr/local/es/ # 进入/usr/local/es/文件夹 cd /usr/local/es/ # 下载对应的glibc版本的sphinx软件包 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-8.17.2-linux-x86_64.tar.gz # 解压 tar -zxvf elasticsearch-8.17.2-linux-x86_64.tar.gz # es 禁止以root用户运行，所以我们创建一个组和用户，用于启动es # 创建组 elasticsearch groupadd elasticsearch # 创建用户，指定用户所在的组 useradd youer -g elasticsearch # 设置用户密码 passwd youer配置# 进入/usr/local/es/elasticsearch-8.17.2/config 配置目录，修改以下配置 cd /usr/local/es/elasticsearch-8.17.2/config vim elasticsearch.yml # 找到以下配置并且修改 =============================================================================== # 集群名称，用于标识一个 Elasticsearch 集群， # 同一集群内的节点需要具有相同的集群名称才能相互通信并组成集群。 # 这里设置为 "my-es"，你可以根据实际情况修改为合适的名称。 cluster.name: my-es # 节点名称，用于在集群中唯一标识一个节点。 # 每个节点都应有一个独特的名称，这里设置为 "node-1"， # 可以根据实际需求进行调整。 node.name: node-1 # 绑定的网络地址，"0.0.0.0" 表示该节点将监听所有可用的网络接口， # 使得其他机器可以通过网络访问该 Elasticsearch 节点。 # 这在生产环境中需要谨慎配置，以确保安全性。 network.host: 0.0.0.0 # HTTP 服务端口，Elasticsearch 通过此端口提供 HTTP 接口供外部访问， # 这里设置为 9200，是 Elasticsearch 默认的 HTTP 端口， # 可根据实际情况修改，但要避免与其他服务端口冲突。 http.port: 9200 # 种子节点列表，用于在节点启动时发现集群中的其他节点。 # 这里指定了 "1…

一步到位！Sphinx 安装配置全流程，PHP 轻松对接
type: item
date: 2025-02-28T13:11:00+08:00
description: 遭遇了 “黑天鹅” 事件近期真是遭遇了 “黑天鹅” 事件，公司因卷入非法问题，面临一系列棘手处理，无奈之下只得遣散全体员工，我也因此瞬间失业。原本按部就班的工作节奏戛然而止，每天醒来，看着毫无安排的一天，心里满是茫然与失落。与其在这种不确定中焦虑徘徊，倒不如主动出击，给自己找点事儿做。我打算投身到文档撰写中，既能有效填补空闲时间，让生活重回正轨，也能借此梳理过往积累的知识与经验，为未来求职筑牢根基，让这段意外失业的日子，不至于虚度 。什么是Sphinx? 有什么优缺点呢？phinx 是开源全文搜索引擎。优点是高性能、功能丰富、可扩展性好、多语言支持、开源成本低；缺点是配置复杂、对内存要求高、实时性有限、缺乏图形化管理界面。安装和配置sphinx官网下载页面服务器：CentOS7，glibc版本2.17安装# 创建存放sphinx软件目录 mkdir -p /usr/local/sphinx/ # 进入/usr/local/sphinx/文件夹 cd /usr/local/sphinx/ # 下载对应的glibc版本的sphinx软件包 wget https://sphinxsearch.com/files/sphinx-3.7.1-da9f8a4-linux-amd64-glibc2.17.tar.gz # 解压 tar -zxvf sphinx-3.7.1-da9f8a4-linux-amd64-glibc2.17.tar.gz配置# 进入到配置目录 cd /usr/local/sphinx/sphinx-3.7.1/etc/ # 创建文件，把配置粘贴进去 vim sphinx.conf ====================================================== # 通用配置部分，定义一些全局的设置 common { # 数据目录，用于存放索引文件和其他相关数据 datadir = ./sphinxdata } # 数据源配置，这里以 MySQL 数据库为例 source names_1_source { # 数据源类型为 MySQL type = mysql # 数据库主机地址，使用 127.0.0.1 以确保端口配置生效 sql_host = 127.0.0.1 # 数据库用户名 sql_user = active # 数据库密码 sql_pass = PcjcrN53sR8bdZyx # 要连接的数据库名 sql_db = active # 数据库端口号，默认是 3306 sql_port = 3306 # SQL 查询语句，用于从数据库中获取要索引的数据 sql_query = SELECT id, surname, name, first, second, gender, type, score, details FROM names_1 # 在执行查询前设置字符集为 UTF-8，确保中文等字符能正确处理 sql_query_pre = SET NAMES utf8mb4 } # 索引配置 index names_1_index { # 索引类型为普通索引 type = plain # 关联的数据源 source = names_1_source # 要进行全文搜索的字段 field = surname, details # 定义属性，用于排序、过滤等操作 attr_uint = gender, type # 无符号整数类型的属性 attr_float = score # 浮点数类型的属性 attr_string = name, first, second # 字符串类型的属性 # 字符集表，涵盖了数字、英文字母（大小写统一）、中文、日文、韩文等字符范围 # charset_table = # 最小词长度，设置为 1 表示单字符也会被索引，适用于中文和单字母搜索 min_word_len = 1 # 词形处理方式，这里设置为不进行词形处理 morphology = none # N - gram 长度，设置为 1 表示按单字符进行 N - gram 索引，有助于中文搜索 ngram_len = 1 # 指定用于 N - gram 索引的字符范围，这里包含了中文、日文、韩文等字符 ngram_chars = U+4E00..U+9FBB, U+3400..U+4DB5, U+20000..U+2A6D6, U+FA0E, U+FA0F, U+FA11, U+FA13, U+FA14, U+FA1F, U+FA21, U+FA23, U+FA24, U+FA27, U+FA28, U+FA29, U+3105..U+312C, U+31A0..U+31B7, U+3041, U+304…

CSS 按钮边框旋转动画：炫酷效果轻松实现
type: item
date: 2024-09-06T17:54:43+08:00
description: 效果图代码 css按钮边框旋转动画 边框按钮

轻松掌握屏幕坐标和窗口通信的实用技巧
type: item
date: 2024-09-06T17:27:00+08:00
description: 我们通过一个实战例子来学习屏幕坐标、窗口通信效果图思考一个问题，上述效果图是不是多个窗口公用一个元素?显然这是不可能的，肯定是三个元素。同一个页面通过url传参的方式根据参数不同，给元素设置不同的背景。做到上述效果图需要哪些必要条件？保证元素的位置在同一个坐标系下相同。只有在电脑屏幕下，它们的坐标系才是相同的。涉及到的知识点导航栏的高度计算 //获取浏览器窗口的工具栏、菜单栏和边框等元素的总高度 function barHeight() { return window.outerHeight - window.innerHeight; }屏幕坐标和视口坐标的转换 解析图 //将视口坐标转换为屏幕坐标 function clientToScreen(clientX, clientY) { //clientX, clientY 是视口坐标 //window.screenX 、window.screenY 是浏览器窗口左上角相对于屏幕左上角的距离 let screenX = clientX + window.screenX; //注意：window.screenY 是浏览器窗口左上角相对于屏幕左上角的距离，不包括浏览器窗口的工具栏、菜单栏和边框等元素的总高度 let screenY = clientY + window.screenY + barHeight(); return [screenX, screenY]; } //将屏幕坐标转换为视口坐标 function screenToClient(screenX, screenY) { let clientX = screenX - window.screenX; let clientY = screenY - window.screenY - barHeight(); return [clientX, clientY]; }拖拽事件 // 选择类名为.container 的元素 const card = document.querySelector('.container'); // 为选中的元素添加鼠标按下事件监听器 card.onmousedown = function (e) { // 计算鼠标指针在卡片元素上的相对偏移量 const x = e.pageX - card.offsetLeft; const y = e.pageY - card.offsetTop; window.onmousemove = function (e) { // 根据相对偏移量和鼠标移动事件的坐标计算卡片新的位置 let cx = e.pageX - x; let cy = e.pageY - y; // 设置卡片元素的新位置 card.style.left = cx + "px"; card.style.top = cy + "px"; } window.onmouseup = function () { // 释放鼠标时，取消鼠标移动和鼠标释放的事件监听器 window.onmousemove = null; window.onmouseup = null; } } 窗口之间的通信 // 创建一个名为'card'的广播频道,这个频道允许不同窗口或标签之间的脚本进行通信 const channel = new BroadcastChannel('card'); // 将当前窗口元素位置的坐标转换为屏幕坐标 let points = clientToScreen(cx, cy); // 向其他窗口传递当前窗口元素位置的屏幕坐标 channel.postMessage(points); // 监听其他窗口传递过来的消息 channel.onmessage = function (event) { // 使用展开运算符将事件数据转换为当前可视坐标 let [clientX, clientY] = screenToClient(...event.data); // 设置元素的left属性值，将视口的X坐标应用于card元素 card.style.left = clientX + "px"; // 设置元素的top属性值，将视口的Y坐标应用于card元素 card.style.top = clientY + "px"; 完整代码html 屏幕坐标和窗口通信 css.container{ width:300px; height: 300px; position: absolute; }js //获取浏览器窗口的工具栏、菜单栏和边框等元素的总高度 function barHeight() { return window.outerHeight - window.innerHeight; } //将视口坐标…

学会正确使用一些form表单元素：提升网页表单质量
type: item
date: 2024-09-05T12:02:02+08:00
description: 元素（支持多选） 用于创建一个支持多选的下拉列表。 元素用于对选项进行分组：label 属性用于为分组指定标签，以描述该组的类别。每组内包含多个 元素。 元素的 value 属性用于指定选项的值，若为空，则默认使用选项的文本作为值。示例代码： 1 2 3 4 以下是为您完善的关于这段代码的笔记：单选按钮组（爱好选择）这段代码通过 标签和 标签创建了一组单选按钮，用于选择爱好。每个 元素的type="radio"表示这是一个单选按钮。name="sex"属性确保在同一组中，只能选择一个选项。通过 标签为每个单选按钮提供了对应的文本描述，并使用for属性与相应的 元素的id属性关联，以提高用户交互性。示例代码：爱好： 篮球 足球 游泳 羽毛球 以下是为您完善的关于这段代码的笔记：浏览器类型选择输入框在这段代码中： 标签用于创建一个段落。段落内包含文本“浏览器类型：”以及一个关联了数据列表的输入框。 定义了一个文本输入框，通过 list 属性关联到 id 为 browser 的数据列表。 定义了数据列表。其中每个 元素代表一个可选项，value 属性指定了实际的值，元素内的文本为显示给用户的描述。当用户在输入框中输入时，会根据输入内容显示匹配的数据列表选项，方便用户快速选择浏览器类型。示例代码： 浏览器类型： 谷歌浏览器 火狐浏览器 苹果浏览器 欧朋浏览器 IE 浏览器 微软浏览器

iframe 元素与 Flash 嵌入在网页中的应用指南
type: item
date: 2024-09-05T10:17:34+08:00
description: iframe 元素框架页iframe 元素通常用于在网页中嵌入其他网页。iframe 是可替换的元素。通常表现为行盒。其显示的内容主要取决于元素自身设置的属性。CSS 对其内部样式的控制存在一定局限性。具有行块盒的部分特点。示例代码： 点击打开京东页面 在页面中使用 flash在网页中使用 flash 可以通过 object 和 embed 元素来实现。这两个元素均为可替换元素。示例代码：

掌握 CSS 更多样式，丰富网页设计
type: item
date: 2024-09-03T11:30:00+08:00
description: 透明度opacity 它设置的是整个元素的透明，取值 0-1， 0 完全透明， 1 完全不透明在颜色位置设置alpha通道(rgba) 可以设置颜色的透明度， 取值 0-1， 0 完全透明， 1 完全不透明鼠标cursor: pointer; 鼠标指针变成手型cursor: move; 鼠标指针变成移动的图标cursor: crosshair; 鼠标指针变成十字形cursor: text; 鼠标指针变成文本输入框cursor: default; 鼠标指针变成默认的箭头cursor: not-allowed; 鼠标指针变成禁止的图标cursor: none; 鼠标指针变成隐藏的图标cursor: inherit; 鼠标指针继承父元素的样式cursor: url(图片路径), auto; 鼠标指针变成自定义的图标，并且鼠标指针变成默认的箭头盒子隐藏display:none, 不生成盒子visibility:hidden, 生成盒子，但是隐藏。背景图img 元素是属于html的概念背景图属于css的概念1.当图片属于网页内容时，必须使用img元素2.当图片仅用于美化网页时，必须使用背景图涉及到的css属性background-image:url(图片路径), 背景图background-repeat:no-repeat, 背景图不重复background-repeat:repeat-x, 背景图只在x轴重复background-repeat:repeat-y, 背景图只在y轴重复background-repeat:repeat, 背景图在x轴和y轴都重复background-size:cover, 背景图覆盖整个盒子background-size:contain, 背景图覆盖整个盒子，并且保持图片的长宽比background-size:100px 100px, 背景图覆盖整个盒子，并且保持图片的长宽比background-position:center, 背景图居中background-position:center center, 背景图居中background-position:right bottom, 背景图居右下方background-attachment:fixed, 背景图固定在页面上background-attachment:scroll, 背景图跟随页面滚动background-color:red, 背景颜色

更多伪类选择器，丰富你的 CSS 工具箱
type: item
date: 2024-09-03T11:13:10+08:00
description: 一、更多伪类选择器伪类选择器在 CSS 中起着至关重要的作用，它们允许你根据元素的特定状态或位置来选择元素，从而实现更加精细的样式控制。（一）first-child作用：选中父元素的第一个子元素。这个选择器对于为特定元素的第一个子元素应用独特的样式非常有用。示例：p:first-child { color: red; }在这个例子中，会选中作为父元素第一个子元素的 元素，并将其文本颜色设置为红色。比如在一个包含多个段落的容器中，只有第一个段落会被应用这个样式。（二）first-of-type作用：选中同类型元素中的第一个元素。与first-child不同，它只关注同类型的元素，而不考虑在父元素中的位置顺序。示例：p:first-of-type { font-weight: bold; }这里会选中页面中第一个 元素，并将其字体加粗。即使这个段落不是父元素的第一个子元素，但只要它是页面中出现的第一个 元素，就会被选中。（三）last-child作用：选中父元素的最后一个子元素。可以用来为父元素的最后一个子元素添加特殊的样式效果。示例：p:last-child { text-decoration: underline; }此代码会给父元素的最后一个 元素添加下划线。例如在一个列表中，最后一个列表项可以通过这个选择器进行突出显示。（四）last-of-type作用：选中同类型元素中的最后一个元素。专注于同类型元素的末尾元素进行样式设置。示例：p:last-of-type { background-color: yellow; }这会将页面中最后一个 元素的背景颜色设置为黄色。无论这个段落在页面中的哪个位置，只要它是同类型元素中的最后一个，就会被选中。（五）nth-child作用：选中父元素中的第 n 个子元素。可以使用具体的数字来指定特定的子元素，也可以使用表达式来选择特定模式的子元素。示例：li:nth-child(3) { list-style-type: square; }这里会选中列表中的第三个 元素，并将其列表样式设置为方块。此外，even可以选中偶数个元素，等同于2n，odd可以选中奇数个元素，等同于2n + 1。li:nth-child(even) { background-color: gray; }这会将列表中的偶数位置的 元素的背景颜色设置为灰色。可以根据需要灵活运用这些选择方式来实现不同的布局效果。（六）nth-of-type作用：选中同类型元素中的第 n 个元素。与nth-child类似，但只针对同类型的元素进行选择。示例：p:nth-of-type(2) { font-style: italic; }此代码会选中页面中第二个 元素，并将其字体设置为斜体。如果页面中有多个段落，这个选择器可以精确地选择特定位置的段落进行样式调整。二、更多的伪元素选择器伪元素选择器能够选择元素的特定部分，为样式设计提供了更多的可能性。（一）first-letter作用：选中元素的第一个字母。可以用于为文本的首字母添加特殊的样式，增强文本的视觉效果。示例：p::first-letter { font-size: 2em; }这会将 元素的第一个字母的字体大小设置为原来的两倍。在段落开头的字母可以通过这个选择器进行突出显示，吸引读者的注意力。（二）first-line作用：选中元素的第一行。对于控制文本的首行样式非常有用，可以实现如首行缩进、特殊字体样式等效果。示例：p::first-line { color: blue; }这里会将 元素的第一行文本颜色设置为蓝色。如果段落内容较长，首行的独特样式可以使文本更具可读性和吸引力。（三）selection作用：选中用户选择的文本。可以为用户选择的文本添加特定的样式，提供更好的交互体验。示例：::selection { background-color: pink; }当用户在页面上选择文本时，被选中的文本背景颜色会变为粉色。这种样式可以让用户更容易识别他们选择的内容，同时也可以增加页面的视觉吸引力。

网页元素定位的详细解读
type: item
date: 2024-09-02T17:48:04+08:00
description: 一、定位概述在网页布局中，定位可以让我们手动控制元素在其包含块中的精确位置，这主要通过 CSS 的position属性来实现。二、position属性取值及特点（一）static（默认值）当元素的position属性为static时，这是默认的状态。在这种情况下，元素按照正常的文档流排列，不会有任何特殊的定位行为。（二）relative（相对定位）文档流与偏移：元素在保持按照正常的文档流排列的同时，根据top、right、bottom、left属性进行位置偏移。这意味着它不会影响其他元素在文档流中的原始位置。控制偏移属性：可以通过四个 CSS 属性（left、right、top、bottom）来精确控制元素的偏移量。例如，可以设置top: 20px; left: 30px;让元素相对于其在文档流中的原始位置向下移动 20 像素，向右移动 30 像素。无影响其他盒子：相对定位的盒子的偏移不会对其他盒子造成任何影响。其他元素在布局时会完全忽略这个偏移，就好像这个元素仍然在其原始位置一样。（三）absolute（绝对定位）文档流与偏移：元素按照正常的文档流排列后，根据top、right、bottom、left属性进行位置偏移。与相对定位不同的是，绝对定位会使元素脱离文档流。脱离文档流的影响：元素摆放忽略：当一个元素被绝对定位并脱离文档流后，文档流中的其他元素在摆放时会忽略这个元素。这意味着其他元素会好像这个绝对定位的元素不存在一样进行布局。自动高度计算忽略：在文档流中元素计算自动高度时，也会忽略脱离文档流的绝对定位元素。这可能会影响到包含块的高度计算以及其他依赖于文档流布局的元素。宽度自适应与包含块变化：宽度自适应：当绝对定位元素的宽度为auto时，它会适应内容的宽度。这意味着元素的宽度将根据其内部内容的大小自动调整。包含块变化：绝对定位元素的包含块会发生变化。它会找祖先元素中第一个定位元素，该元素的填充盒为其包含块。如果找不到任何定位的祖先元素，则包含块为整个网页（初始化包含块）。（四）fixed（固定定位）与绝对定位相似性：在大多数情况下，固定定位和绝对定位非常相似。元素会根据top、right、bottom、left属性进行位置偏移，并且也会脱离文档流，具有与绝对定位类似的影响。不同的包含块：固定定位的元素的包含块与绝对定位不同。固定定位的元素固定为视口，即浏览器的可视窗口。这意味着无论页面如何滚动，固定定位的元素始终保持在相对于视口的相同位置。三、定位下的居中在绝对定位和固定定位中，可以通过以下步骤实现某个方向上的居中：定宽（高）：首先确定要居中的元素的宽度（或高度，如果是垂直方向上的居中）。可以通过设置具体的像素值或使用相对单位来确定宽度或高度。设置距离为 0：将元素的左右（或上下，如果是垂直方向上的居中）距离设置为 0。这可以通过设置left: 0; right: 0;（或top: 0; bottom: 0;）来实现。设置margin为auto：最后，将元素的margin设置为auto。在绝对定位和固定定位中，margin设置为auto时，会自动吸收剩余空间，从而实现元素在该方向上的居中。例如，margin: auto 0;可以实现水平方向上的居中，margin: 0 auto;可以实现垂直方向上的居中。四、多个定位元素重叠时（一）堆叠上下文当多个定位元素重叠时，会涉及到堆叠上下文的概念。可以通过设置z-index属性来控制元素的堆叠顺序。通常情况下，z-index值越大，元素越靠近用户。需要注意以下几点：仅对定位元素有效：只有定位元素设置z-index时才会生效。如果一个元素的position属性为static，设置z-index将不会产生任何效果。负数的影响：z-index可以为负数。当z-index为负数时，如果遇到常规流元素或浮动元素，这个定位元素会被覆盖。五、补充说明绝对定位与固定定位的元素类型：绝对定位和固定定位的元素一定是块盒。这意味着它们会像块级元素一样占据一行空间，可以设置宽度、高度、内外边距等属性。与浮动的关系：绝对定位和固定定位的元素一定不是浮动。它们不会参与浮动布局，也不会受到浮动元素的影响。外边距合并问题：绝对定位和固定定位的元素没有外边距合并的情况。这与常规流中的块盒和行盒不同，在常规流中，块盒之间可能会发生外边距合并。