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

Chrome 125:CSS 定位来了!

最近,Chrome 发布了 Chrome 125 稳定版本,其中我觉得最有亮点的新特性就是 CSS 定位了。...我觉得 CSS 定位 API (CSS anchor positioning API)可以在一定程度上改变 Web 的开发方式,因为它允许我们以原生方式定位相对于其他元素(称为点)的元素。...借助浏览器内置的定位,我们可以在无需依赖第三方库的情况下简单构建分层用户界面。 此 API 的核心就在于点和定位元素之间的关系。...点指的就是使用 anchor-name 属性指定为参考点的元素,定位元素则是使用 position-anchor 属性或在其定位逻辑中明确使用 anchor-name 相对于点放置的元素。....positioned-notice { top: anchor(--anchor-el bottom); } 定位 定位建立在 CSS 绝对定位的基础上,要使用定位值,我们需要向定位元素添加

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

    hash实现点平滑滚动定位

    点是网页制作中超级链接的一种,又叫命名记。命名记像一个迅速定位器一样,是一种页面内的超级链接 二、点简单的栗子 <!...三、改进过渡效果 前期理论准备 既然hash值是对应点的id值,那如果改为js动态获取hash值,然后再根据hash值获得dom对象。最后,用js进行平缓过渡。  ...基于这个思路,就必须要求hash的取名有独特性,不能跟页面中的任何一个id一致,否则会触发浏览器默认的定位行为。... 编写读取特殊hasn值的方法以及缓动方法(本示例不考虑兼容性)** (function(window, undefined){ // 监听页面加载完成后,检查是否需要定位点...class="spacing2">间隔8 (function(window, undefined){ // 监听页面加载完成后,检查是否需要定位

    8.6K41

    Android 实现定位思路详解

    相信做前端的都做过页面定位的功能,通过<a href="#head" rel="external nofollow" 去设置页面内定位跳转。...本篇文章就使用tablayout、scrollview来实现android定位的功能。 效果图: ?...判读是否是scrollview主动引起的滑动,true-是,false-否,由tablayout引起的 private boolean isScroll; //记录上一次位置,防止在同一内容块里滑动 重复定位到...写到这里,tablayout + scrollview的定位成型了,在实际项目中,我们还可以使用tablayout + recyclerview 来完成同样的效果,后续的话会带来这样的文章。...详细代码见 github地址:https://github.com/taixiang/tabScroll 总结 以上所述是小编给大家介绍的Android 实现定位思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言

    2.1K20

    页面中元素的定位

    这是我参与「掘金日新计划 · 8 月更文挑战」的第12天,点击查看活动详情 >> [定位] 点击相应的按钮,页面滚动到相应的位置,目前我知道实现该功能的方式有两种: 使用a标签定位 使用js模拟定位...[使用a标签定位] 这是一种常见的定位方式,它有两种实现方式: 通过href属性链接到指定元素的id 2.另一种是添加一个 a 标签,再将 href 属性链接到这个 a 标签的 name 属性 <...,支持任意标签的定位,但是a标签的定位会改变路由的hash,如果有相关路由会进行路由跳转 [使用js模拟定位] 通过js获取元素的scrollTop值,使其滚动到指定的位置,就能实现定位效果,这里的...--点点击事件--> <!...如果产品可以接受效果有延迟,就可以使用节流函数控制在一定时间内只执行一次函数(节流函数可以使用lodash.js 封装好的 throttle 方法)

    2K70

    超强的 Anchor Positioning 定位

    Anchor Positioning(定位)允许我们基于其它点元素的位置和尺寸去定位上下文,而不是传统意义上的基于父元素去进行绝对定位。...其重点总结如下: 首先,定位,需要我们通过新的点名称(anchor-name)来标记元素,允许我们使用这些经过了标记的元素作为我们绝对定位的基准目标; 其次,我们可以在绝对定位的元素上,通过新的语法...的点元素进行定位。...Anchor Positioning(定位)允许我们基于其它点元素的位置和尺寸去定位上下文,而不是传统意义上的基于父元素去进行绝对定位。...利用了 :has 选择器,实现当任意一个 被 hover,则设置 --target 点变量为当前的 元素,也就是实现了点元素的动态变换 最终,只需要让下划线,基于动态的点进行定位即可

    40430

    React项目中如何实现一个简单的点目录定位

    前言 点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节 如何在React中实现定位和平滑滚动 目录自动高亮的实现思路 处理顶部导航遮挡点的解决方案 服务端渲染下的实现方案...性能优化策略 实现基本定位 首先,我们需要实现页面内基本的定位功能。...定位和目录联动 很多时候,我们会在页面中实现一个目录导航,可以快速定位到各个章节。...等情况下,实现定位和目录联动也会有一些不同。...但是在Next.js的SSR环境下就会有问题: 点击目录链接时,页面不会滚动。 这是因为在服务端,我们无法获取组件的ref,所以点元素不存在,自然无法定位。 滚动页面时,目录高亮也失效。

    1.1K20

    如何利用链路追踪快速定位问题

    此时,在我们遇上问题排查的时候,追溯到了某个接口之后线索就断了,非常难再往下定位问题。...这样我们就能通过标记在请求链路上的这个唯一id来快速定位问题,从而大量节省我们排查问题和统计分析的时间。其实上述的只是我们在微服务中最常遇上的两个问题。...系统出现问题后,由于服务链路过长或过于复杂,无法快速准确定位问题。客户端(如浏览器)或者移动端应用报出异常或者错误,也无法确定是哪个服务抛出的异常。...修改成:如何快速发现问题并可以通过调用链结合业务日志快速定位错误信息? 如何判断故障影响范围,并将各个阶段链路耗时、服务依赖关系可以通过可视化界面展现出来,从而直观地审视故障的影响范围?...结合上图我们,我们可以利用Annotation里的信息来计算一次调用的耗时,只需将客户端结束的时间点减去客户端开始请求的时间点。

    33230

    曝NSA利用Google Cookie定位监控对象

    据《华盛顿邮报》最新解读,NSA秘密利用互联网广告商的消费者追踪工具,通过cookoie和地理数据来锁定政府所要监控的对象。...根据NSA前通讯员斯诺登提供的幻灯片可以发现,那些为互联网广告商所利用的用户数据追踪技术同样也为政府情报机构“开了一道大门”。...《华盛顿邮报》表明,NSA和英国GCHQ都在利用互联网广告商存放在计算机中的文件或cookie来获得数据。...NSA发现,Google特有的追踪技术--PREF cookie虽然不包含任何诸如姓名、邮箱地址的个人信息,但它们却有数字代码,这些代码可以让Google锁定某一名用户的浏览器,NSA同样也能利用 这种技术实现以上功能...另外,文件中还显示,NSA利用这种商用技术收集移动设备的定位数据。

    73851

    利用qq钓鱼或者定位女友是否回家

    看看下面的聊天 哈哈此时我们看看后台(后台代码看地址定位章节) 哈哈,已经得到女友的ip了,现在查询一下地址在哪里?是不是你老婆不在加班啊!!!...imge.kugou.com/stdmusic/135/20150720/20150720173400344661.jpg&flash=&site=bbs.microdesktop.com 第三章 利用...bbs.microdesktop.com 接着再做一个钓鱼网站,当别人访问的时候就弹出登录框,让人输入账号密码,钓鱼网站我就不做了,对于手机qq版本,如果从对话框中打开,还看不到网站地址,这样欺骗更大 第二点:地址定位...这个利用也差不多,首先打探一下,你家妹子喜欢什么,再做一个框框, 这个图片是采用bbs.microdesktop.com博客的图片啊 只要他点击,你后台网站就记录访问的ip,后台代码实现

    89250
    领券