【CSS】CSS定位元素

news/2024/6/16 11:17:21/文章来源:https://blog.csdn.net/kakaai77/article/details/137201105

CSS定位元素

1.标准流

  • 默认情况下,元素都是按照标准流进行排布,互相不存在层叠现象
  • 标准流中,可以使用margin和padding对元素进行定位,其中margin可以使用负数
  • 缺点
    • 设置一个元素的定位,会影响其他盒子的定位效果
    • 不能实现层叠

2.元素的定位

2.1 静态定位

​ 元素按照标准流布局,所有元素的默认定位是static

2.2 相对定位

  • 元素也是按照标准流(normal flow)来布局
  • 可以通过left right top bottom 来对元素进行定位
    • 定位参照对象是原来标准流中的位置
  • 可以在不影响其他元素的提前下,对自己进行微调

对图片居中的处理

方法1:利用background-position来进行

html:

 <div class="box">
</div>

css

.box {height: 498px;background-image: url(../images/mhxy.jpg);background-position: center;
}

但这样有一个缺点,海报图对于一个网站上很重要的,应该用img标签实现

方法2:利用相对定位

<div class="box"><img src="../images/mhxy.jpg" alt="" />
</div>
.box {height: 498px;overflow: hidden;
}
.box img {position: relative;/* 先向左移动图片长度的一半 */left: -960px;/* 或利用平移,移动自身的宽度一半 *//* transform: translateX(-50%); *//* 利用margin移动父元素的一半,使得图片和box两个中心点重合 */margin-left: 50%;
}

在这里插入图片描述

2.3 固定定位

  • 脱离标准流(normal flow)脱标
  • 可以通过 left、right、top、bottom来进行定位
  • 定位的参照对象是视口
  • 当画布滚动时,固定不动

2.4 定位元素的特点

  • 可以随意设置宽高
  • 宽高默认由内容决定
  • 不再受标准流的约束
    • 不再严格按照从上到下、从左到右排布
    • 不再严格区分块级、行内级,很多特性都会消失
  • 不再给父元素汇报宽高数据
  • 脱标元素内部还是按照标准流布局

2.5 绝对定位

  • 元素脱标
  • 可以通过left right top bottom来进行定位
    • 定位元素参照对象是最相邻的定位祖先元素
    • 如果找不到,参考对象为视口
  • 定位元素
    • position的值不是static的元素
  • 子绝父相

2.6 绝对定位元素的特性

  • 绝对定位元素:
    • position的值为absolute或者fixed的元素
  • 对于绝对定位元素来说
    • 定位参考对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际宽度
    • 定位参考对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际高度
  • 设置绝对定位元素的宽高和参照元素一致(利用上面的公式可以算出来)
    • left:0 right:0 margin:0 top:0 bottom:0
  • 设置绝对定位元素的在参照元素中水平、垂直方向居中显示
    • left 0 right 0 top 0 bottom 0 ,margin:auto

设置绝对定位元素的垂直水平居中

<div class="box"><div class="container"></div>
</div>
.box {width: 300px;height: 300px;position: relative;background-color: pink;
}.box .container {width: 100px;height: 100px;background-color: purple;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}

2.7 粘性定位

  • 属性值postion:sticky为粘性定位
  • 粘性定位可以看做是相对定位和固定定位的结合体
  • 设置某个阈值,在到达阈值前可以是相对定位,到达阈值后变成固定定位
  • stickey是相对于最近的一个滚动视口的(找不到才会选择浏览器滚动视口)
<div class="box"><h1>局部滚动窗口</h1><div class="menu"><span1>列标1</span1><span2>列标2</span2><span3>列标3</span3></div><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li><li>列表13</li><li>列表14</li><li>列表15</li><li>列表16</li><li>列表17</li><li>列表18</li><li>列表19</li>...</ul>
</div>
.box {width: 300px;height: 500px;overflow: auto;margin: 100px auto;
}
.box .menu {position: sticky;/* 阈值,当该元素到滚动视图top尺寸小于等于0时,改为固定定位 */top: 0;background-color: pink;
}

在这里插入图片描述

在这里插入图片描述

2.8 z-index属性

  • z-index的属性可以用来设置定位元素的层叠顺序
    • 取值可以为正整数、负整数、0
  • 比较元素
    • 如果为兄弟元素
      • z-index的值越大,层级越高
      • z-index相同,后写的元素层级高
    • 如果不是兄弟元素、
      • 各自从元素自己以及祖先元素中,找到最相邻的2个定位元素进行比较
      • 并且这两个定位元素必须设置z-index属性
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

当一个定位元素的层级设置为负整数时,层级没有标准流的层级高

.box {width: 200px;height: 200px;
}
.box1 {position: relative;background-color: pink;z-index: -1;top: 100px;
}
.box2 {background-color: purple;
}
.box3 {background-color: green;
}

在这里插入图片描述

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

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

相关文章

内容营销新手指南:Kompas.ai的智能起步策略

内容营销是当今企业获取客户、建立品牌认知和忠诚度的关键手段。然而&#xff0c;对于刚刚踏入这一领域的新手来说&#xff0c;内容营销的世界可能会显得既广阔又复杂。从内容创作到发布&#xff0c;再到分析和优化&#xff0c;每一步都充满了挑战。本文旨在为内容营销新手提供…

蓝桥杯算法题——暴力枚举法

先估算这个数小于3的50次方 cnt0 for i in range(50):for j in range(50):for k in range(50):a3**ib5**jc7**kif a*b*c<59084709587505:cnt1 print(cnt-1)#当ijk都为0时&#xff0c;a*b*c1不是幸运数字所以要减去

突破编程_前端_JS编程实例(分割窗体组件)

1 开发目标 分隔窗体组件旨在提供灵活的窗体分隔功能&#xff0c;支持横向分割与纵向分隔两种类型&#xff0c;并具备拖拽调整窗体比例的功能&#xff0c;同时提供最小比例设置&#xff0c;以防止窗体被过度缩小&#xff1a; 2 详细需求 2.1 分隔窗体类型 &#xff08;1&…

3D密集面部对齐项目 | 基于Pytorch实现的快速+准确+稳定的3D面部对齐算法

项目应用场景 可以应用于人脸面部三维特征点的提取 人脸面部的三维重建&#xff0c;项目的特点是基于 Pytorch 实现、快速、准确、稳定 项目效果&#xff1a; 项目流程 > 具体参见项目内README.md (1) 构建 sh ./build.sh (2) 执行示例 # 1. running on still i…

【Servlet】服务器内部转发以及客户端重定向

文章目录 一、服务器内部转发&#xff1a;request.getRequestDispatcher("...").forward(request, response);二、客户端重定向&#xff1a;response.sendRedirect("");三、服务器内部转发代码示例四、客户端重定向代码示例 一、服务器内部转发&#xff1a…

TSINGSEE青犀智慧工厂视频汇聚与安全风险智能识别和预警方案

在智慧工厂的建设中&#xff0c;智能视频监控方案扮演着至关重要的角色。它不仅能够实现全方位、无死角的监控&#xff0c;还能够通过人工智能技术&#xff0c;实现智能识别、预警和分析&#xff0c;为工厂的安全生产和高效运营提供有力保障。 TSINGSEE青犀智慧工厂智能视频监…

Reasoning on Graphs: Faithful and Interpretable Large Language Model Reasonin

摘要 大型语言模型(llm)在复杂任务中表现出令人印象深刻的推理能力。然而&#xff0c;他们在推理过程中缺乏最新的知识和经验幻觉&#xff0c;这可能导致不正确的推理过程&#xff0c;降低他们的表现和可信度。知识图谱(Knowledge graphs, KGs)以结构化的形式捕获了大量的事实…

常见手撕项目C++

常见手撕项目C 设计模式单例模式饿汉模式懒汉模式 策略模式策略接口实现具体的策略&#xff08;虚函数重写&#xff09;定义上下文用户调用 代码使用函数模板写冒泡排序写一个类模板 设计模式 单例模式 单例模式是一种常用的软件设计模式&#xff0c;其目的是确保一个类只有一…

opejdk11 java 启动流程 java main方法怎么被jvm执行

java启动过程 java main方法怎么被jvm执行 java main方法是怎么被jvm调用的 1、jvm main入口 2、执行JLI_Launch方法 3、执行JVMInit方法 4、执行ContinueInNewThread方法 5、执行CallJavaMainInNewThread方法 6、创建线程执行ThreadJavaMain方法 7、执行ThreadJavaMain方法…

项目中完整的使用eslint检查代码风格过程

遇到的bug&#xff1a;如果vscode的eslint插件更新到最新2.4.4版本&#xff0c;有可能导致eslint版本不起作用&#xff0c;所以可以选择不更新版本&#xff0c;还有其他什么办法解决可以留言。 如何在创建项目后使用eslint&#xff0c;比如vue项目&#xff0c;uniapp项目&…

Taro + vue3 小程序封装标题组件

分为没有跳转页面的title组件和 有跳转页面的title组件 我们可以把这个封装成一个组件 直接上代码 <template><div class"fixed-title-container"><div class"box"><div class"icon" v-if"isShow" click"…

Linux 内核优化简笔 - 高并发的系统

简介 Linux 服务器在高并发场景下&#xff0c;默认的内核参数无法利用现有硬件&#xff0c;造成软件崩溃、卡顿、性能瓶颈。 当然&#xff0c;修改参数只是让Linux更好软件的去利用已有的硬件资源&#xff0c;如果硬件资源不够也无法解决问题的。而且当硬件资源不足的时候&am…

互联网轻量级框架整合之JavaEE基础I

不得不解释得几个概念 JavaEE SUN公司提出来的企业版Java开发中间件&#xff0c;主要用于企业级互联网系统的框架搭建&#xff0c;同时因为Java语言优质的平台无关性、可移植性、健壮性、支持多线程和安全性等优势&#xff0c;其迅速成为构建企业互联网平台的主流技术&#x…

matlab中旋转矩阵函数

文章目录 matlab里的旋转矩阵、四元数、欧拉角四元数根据两向量计算向量之间的旋转矩阵和四元数欧拉角转旋转矩阵旋转矩阵转欧拉角旋转矩阵转四元数参考链接 matlab里的旋转矩阵、四元数、欧拉角 旋转矩阵dcmR四元数quatq[q0,q1,q2,q3]欧拉角angle[row,pitch,yaw] % 旋转矩阵…

囊括所有大模型:高质量中文预训练模型大模型多模态模型大语言模型集合

在自然语言处理领域中&#xff0c;预训练语言模型&#xff08;Pretrained Language Models&#xff09;已成为非常重要的基础技术&#xff0c;本仓库主要收集目前网上公开的一些高质量中文预训练模型、中文多模态模型、中文大语言模型等内容(感谢分享资源的大佬)&#xff0c;并…

WPF学习笔记-FlowDocument流文档基础知识和基本操作

文章目录 概述一、块元素和内联元素1.1 块元素&#xff08;Block类&#xff09;1.2 内联元素&#xff08;Inline类&#xff09;二、Paragraph元素2.1 基本属性设置2.2 将内联元素Inline添加到Inlines中2.3 设置中西文字体不一样 三、Table元素3.1 添加新的Table3.2 添加列3.3 添…

数据结构进阶篇 之 【堆的应用】(堆排序,TOP-K问题)详细讲解

所有人都关心我飞的高不高&#xff0c;只有我妈关心我翅膀硬不硬 一、堆的应用 1. 堆排序 1.1 建堆 1.2 利用堆删除思想来进行排序 2.TOP-K问题 二、完结撒❀ –❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀–❀-正文开始-❀–❀–❀–❀–❀–❀–❀–❀–…

每日面经分享(pytest测试案例,接口断言,多并发断言)

pytest对用户登录接口进行自动化脚本设计 a. 创建一个名为"test_login.py"的测试文件&#xff0c;编写以下测试脚本 import pytest import requests# 测试用例1&#xff1a;验证登录成功的情况 # 第一个测试用例验证登录成功的情况&#xff0c;发送有效的用户名和密…

网页的血液——javascript

JavaScript 基础知识概述 1. JavaScript 介绍 JavaScript 是一种高级的、解释型的编程语言&#xff0c;它是一种基于对象的、事件驱动的语言&#xff0c;它允许开发者创建动态的网页。JavaScript 是一种脚本语言&#xff0c;它可以嵌入到 HTML 中&#xff0c;或者作为外部文件…

聚焦新污染物,共谋治理策|中联环保圈

在环境污染防治的征途上&#xff0c;新污染物治理不仅是一场考验决心和毅力的攻坚战&#xff0c;更是对原有治理策略的广度和深度的全面拓展。这需要以更加坚定的决心&#xff0c;更加科学的策略&#xff0c;以及更加创新的思维来应对。 地方两会圆满闭幕之际&#xff0c;各地…