首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 定位布局 - 相对、绝对、固定三种定位

absolute 生成绝对定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。...在上面相对定位的示例中,元素相对定位是基于文档流原来的位置进行偏移定位的。那么,绝对定位是基于什么的呢? 将刚才关于设置相对定位的代码改为绝对定位看看。 ?...上面已经测试使用了绝对定位,绝对定位基本是与父级元素进行偏移定位的。那么fixed固定定位按照描述应该就直接是基于body进行偏移定位的。 那么这个怎么去验证呢?...先看看原来基于父级定位的绝对定位的div情况如下: ? 将绿色div的绝对定位改为固定定位,如下: ?...从上面的结果来看,固定定位是完全不管父级元素是否设置了定位属性的,直接就与body进行定位偏移。 这种定位方式最适合用于放广告了。

3.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    前端性能优化(21种优化+7种定位方式)

    2.定位: 2.1 技术上的选择 在前端日常开发中,技术上的选择是非常重要的。为什么要讲这个呢?因为现象频发。 前端工程化严重的当下,轻量化的框架慢慢被遗忘掉了。...3.9 懒加载 懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种非常好的优化网页性能的方式。 当可视区域没有滚到资源需要加载的地方时候,可视区域外的资源就不会加载。...图片懒加载 layzr.js 3.10 iconfont 中文(字体图表),现在比较流行的一种用法。使用字体图表有几种好处 矢量 轻量 易修改 不占用图片资源请求。...3.11 逻辑后移 逻辑后移是一种比较常见的优化手段。用一个打开文章网站的操作来举个例子。 没有逻辑后移处理的请求顺序是这个样子的 ?...3.19 Resource Hints Resource Hints(资源预加载)是非常好的一种性能优化方法,可以大大降低页面加载时间,给用户更加流畅的用户体验。

    10.4K76

    网站布局中的三种定位级

    第1种定位级:块对象默认定位级 此定位级特点:块对象默认情况下跟据其出现顺序上下安排布局 下图中是用块对象默认定位级排列的一个大容器包着三个小容器: 第2种定位级:块对象浮动定位级 此定位级特点:高于第...1种定位级(此级别的对象会压在第1种定位级别对象上面),此定位级中块对象可横向摆放。...第3种定位级:绝对定位级 此定位级特点:高于第2种定位级(此级别的对象会压在其他定位级别对象上面),此定位级中的对象就像是photoshop里的图层。是用独立坐标来定位的。...下图中是用绝对定位级的显示效果 案例分析: 第一部分:给块对象加float属性让其升级为浮动定位级 默认情况下div都是第1种定位级——块对象默认定位级 如下图: 当我们给红色的子级设置float...看下图: 用同样的办法,我们给绿色和蓝色的子级都加float属性,他们就都跟红色的子级一样升级到了第2种定位级——块对象浮动定位级。

    861140

    【CSS】定位 ② ( 静态定位 | 相对定位 )

    一、静态定位 ---- CSS 中的 静态定位 是 默认的定位方式 , 就是无定位 , 设置该定位方式 , 定位盒子不生效 ; 为盒子模型 设置 静态定位 模式 , 该 盒子模型 就会按照标准流的方式...摆放布局 , 没有任何 边偏移 的效果 ; 在 使用 定位 时 , 几乎不适用 静态定位 ; 二、相对定位 ---- 相对定位 是 盒子模型 相对于 其在 标准流中的位置 设置的 ; 如 : 盒子模型...在标准流 中 , 原来的位置是 (0 , 0) , 设置了相对定位 , 就是 相对于原来的位置 (0, 0) 进行 边偏移 后的位置 ; 下面的示例中 , 盒子模型的初始位置是 在浏览器的 左上角 (...DOCTYPE html> 相对定位 div {...= 定位模式 + 边偏移 */ /* 定位模式 : 相对定位; */ position: relative; /* 顶部偏移量 100 像素 */ top: 100px;

    1.4K20

    python爬虫之定位网页元素的三种方式

    python 版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/rankun1/article/details/81357179 在做爬虫的过程中,网页元素的定位是比较重要的一环...,本文总结了python爬虫中比较常用的三种定位网页元素的方式。...1.普通的BeautifulSoup find系列操作 2.BeautifulSoup css选择器 3. xpath 这三种方式灵活运用,再配合上正则表达式,没有什么网页能难倒你啦。...top250第一页的电影标题为例来比较: import requests from bs4 import BeautifulSoup from lxml import etree # 通过find定位标签...= r.status_code:         return None     # 三种定位元素的方式:     # 普通BeautifulSoup find     return bs_parse_movies

    3.3K20

    一种系统性能定位的简单策略

    性能分析方法可以提供一种有效的方法来分析系统或组件并识别问题的根本原因,而不需要深入的专业知识。方法论也可以提供识别和量化问题的方法,使它们被了解和排序。特定的性能检查表已经成为一种流行的资源。...第二种方式是运行工具和收集数据,这要优于随意的假设,但它仍不足以进行有效的性能分析,这是缺乏深思熟虑的方法。...关于性能问题的早期快速定位 对于每个资源,我们可以检查它的利用率、饱和度和错误。资源意味着单独检查的所有物理服务器功能组件(cpu、磁盘、总线等),一些软件资源也可以使用相同的方法进行检查。...资源列表 快速定位性能问题需要一个完整的资源列表,例如,一个服务器硬件资源的通用列表如下: CPU ー sockets、核心、硬件线程(虚拟 cpu)。...性能定位的策略 性能问题定位的核心是确定使用哪些度量指标,从操作系统读取这些指标后,需要解释这些指标当前的值。对于某些度量指标,解释可能是显而易见的,并且有很好的文档记)。

    55120

    四种火焰图,快速定位Off-CPU性能问题

    下图是一种Off-CPU时间的情况: off-cpu event https://www.brendangregg.com/FlameGraphs/offcpuflamegraphs.html 这是一个引用线程被系统调用阻塞的情况...本文不会介绍Off-CPU分析相关的内容,本文将介绍如何四种使用火焰图来进行Off-CPU性能分析的方法: I/O火焰图 Off-CPU火焰图 Wakeup火焰图 调用图(chain graphs) I...因此,追踪I/O也是做Off-CPU分析的一种方式。为了能够生成火焰图,我们需要捕获I/O的时间以及I/O对应的调用栈或者代码路径。我们可以用perf或eBpf来进行追踪。...Chain Graphs 结合Off-CPU火焰图和wakeup火焰图,我们可以得到很多信息,那么是否有一种方式可以直接追踪整个过程呢?...链图是一种实验性质的可视化方式,其将Off-CPU和wakeup堆栈关联起来,虽然开销会比较高,但是我们可以得到很多有用的信息。

    2.3K20

    实操CSS定位:绝对定位、相对定位和固定定位

    在CSS中,定位是一个复杂但重要的概念。它允许我们控制元素在页面上的位置。本文将详细介绍CSS中的三种主要定位类型:绝对定位、相对定位和固定定位。...CSS定位的基本概念在CSS中,position属性用于设置元素的定位类型。它有五个值:static、relative、absolute、fixed和sticky。...相对定位(Relative Positioning)相对定位元素的定位是相对于其在正常流中的原始位置。...css复制div { position: relative; top: 10px;}绝对定位(Absolute Positioning)绝对定位元素的定位是相对于最近的已定位祖先元素(而不是相对于视口...css复制div { position: absolute; top: 50px; left: 50px;}固定定位(Fixed Positioning)固定定位元素的定位是相对于视口,这意味着即使页面滚动

    35010

    DLL: 一种直接法的激光雷达定位方案

    摘要 本文介绍了一种基于三维激光雷达的快速直接地图定位技术DLL,并将其应用于航空机器人,DLL基于点云地图的非线性优化实现点云到地图的配准,因此不需要特征,也不需要点之间的对应关系,给定一个初始姿态,...主要内容 使用点云进行基于地图的机器人定位的过程可以总结为: •机器人里程计,这里提供了一个很好的先验信息,表明自上次定位机器人以来,机器人移动了多少,该先验知识可用于在地图中准确猜测机器人的位置/方向...DLL提出了一种新的快速准确的点云配准方法,使惯导可以作为实际机器人安装中的主要定位系统,DLL已经在C++中实现并集成到ROS框架中,使用Ceres Solver来实现非线性优化过程。...实验对比 总结 提出了一种基于三维激光雷达的直接地图姿态跟踪方法,该方法使用原始点云,避免搜索点的对应关系,通过直接优化点云到地图的距离,使用地图的距离场表示法,对里程计预测的姿势进行细化,结果表明...,对于所考虑的场景,该方法如何达到与NDT和ICP等方法类似的精度,但运行速度快一个数量级,可实时执行,此外,在噪声里程计的情况下,基于优化的NDT和DLL方法比蒙特卡罗定位方法表现更好。

    44440

    麦克风声源定位原理_一种利用麦克风阵列进行声源定位的方法与流程

    本发明涉及计算机信号处理领域,具体涉及一种用麦克风阵列时延估计定位声源的方法。 背景技术: 20世纪80年代以来,麦克风阵列信号处理技术得到迅猛的发展,并在雷达、声纳及通信中得到广泛的应用。...技术实现要素: 鉴于麦克风阵列的声源定位方法具有广泛的应用前景和潜在的经济效益,本发明旨在提供一种利用麦克风阵列进行声源定位的方法,以期应用在包括语音识别、强噪声环境下的语音获取、大型场所的会议记录、声音检测和助听装置等领域...为实现上述目的,本发明采用以下技术方案: 一种利用麦克风阵列进行声源定位的方法,包括时延估计和声源定位,其特征在于:首先,通过算法估计声源信号到达阵列中麦克风阵元的相对时间差;第二步则利用估计时间差来计算出声源到达各阵元的距离差...附图说明 图1是本发明的声源定位原理图。 具体实施方式 本发明的声源定位方法通常分为两个步骤,即时延估计和声源定位。...,但在定位精度会受到很多因素的影响,其中影响定位精度的主要因素是时延估计方法和定位方法。

    1.4K20
    领券