绝对定位与inset

实现一种这样的布局：屏幕中间有一块滚动区域，滚动滚动条时，里面的猫猫图片会随之滚动。

滚动条滚动一点时：

继续滚动滚动条，把猫猫图片展示在中间区域：

代码：


<style>body {background-color: antiquewhite;}.contain {position: absolute;inset: 100px;overflow: auto;background-color: #000;}.fa {width: 3440px;height: 2960px;padding: 1000px;} .son {width: 1440px;height: 960px;background-image: url('../img/1.jpg');}
</style><div class="contain"><div class="fa"><div class="son"></div></div>
</div>

定位以后，inset属性才有效。
inset：100px；意思是当前定位元素相对于最近定位的祖先元素的位置。因为这个例子中没有定位的祖先元素，所以相对于html进行定位，那么当前元素距离浏览器窗口的 “距离” （不是外边距）为100px。也就是说当inset：0; 时，当前元素是紧贴着浏览器窗口的。

（1）inset: 0;时，contain元素紧贴浏览器窗口。contain元素要绝对定位哦

效果图：

（2）inset: 100px;时：

效果图：

注意： contain不能有宽高，如果给contain加上宽高，效果会发生变化，就不会在屏幕中居中显示了

绝对定位与inset相关推荐

autoware定位：gnss定位与lidar定位（四）
autoware定位:gnss定位与lidar定位(四) 介绍如何在autoware中使用GNSS进行定位启动autoware $ cd ~/autoware.ai $ source install ...
c轴 t轴 l轴_从事数控工作的你知道3轴、3+2轴定位与5轴联动的区别吗？
从事数控工作的你知道数控机床的3轴.3+2轴定位与5轴联动的区别吗? 平时我们经常提到的3轴.3+2轴.5轴等加工方案,他们的区别是什么?先给大家介绍一下几种加工方式的说明: 一.3轴加工方式 3轴 ...
GPS定位与IP地址定位有何不同？
随着数字化时代到来,智能终端快速普及与应用,人们在生活和工作中越来越多地应用到位置服务,从导航查询,到侦查搜救,位置核验等应用十分广泛.万物互联的到来,更是对位置服务的要求日益提高,而位置服务的核心要 ...
GPS定位与IP地址定位
在日常生活中,常用的定位技术包括GPS定位.基站定位与IP地址定位.WIFI定位. 关于GPS定位 GPS(Global Positioning System,全球定位系统)起始于1958年美国军方 ...
交通工程的性质、定位与“创新”（一）
交通工程的性质.定位与"创新"(一) --人行横道:设施VS艺术存在着两种完全不同类型的知识.一种是你"知道自己不知道"的,比如奥数.对于这类知识,如果 ...
【高精度定位】RTK定位与RTD定位知识科普
高精度定位一般指亚米级别或厘米级别的定位,常见的室内有蓝牙AoA和UWB两种技术,室外有北斗地基增强技术,这些技术都是采用算法进行定位. 工业4.0时代,在资源和环境约束不断强化的背景下,创新驱动传统 ...
数控机床的3+2 定位与5轴联动的区别?
一. 什么是3+2定位加工在一个三轴铣削程序执行时,使用五轴机床的两个旋转轴将切削刀具固定在一个倾斜的位置,3+2加工技术的名字也由此而来,这也叫做定位五轴机床,因为第四个轴和第五个轴是用来确定在固 ...
室内定位系统方案|蓝牙定位与UWB（超宽带）定位的区别
室内定位行业能够发展迅速,市场规模能够快速扩张,都与定位技术的多样化密切相关.常见的室内定位技术有蓝牙定位技术.WiFi定位技术.UWB(超宽带)定位技术.ZigBee定位技术.视觉定位等.近几年,物 ...
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计
本文代码为CSS定位与DIV布局实战-新疆行知书网页设计的代码 by:arsoooo 网页效果如下: 源代码(相关文件下载在最后) index.html文件代码 //index.html的代码如下 & ...

绝对定位与inset

绝对定位与inset相关推荐

最新文章

热门文章