开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

相对div在滚动时经过固定div

好的，我会尽力为您提供最完善和全面的答案。

首先，让我们来看一下这个问题的背景和需求。

在网站开发中，有时需要将一个或多个元素固定在页面上的某个位置，以便在滚动时这些元素不会移动。为了实现这种效果，开发人员可以使用相对位置来定位这些元素。相对位置是指元素相对于其原始位置的位置。通过使用相对位置，元素可以保持在页面上的固定位置，同时仍可以在页面上水平滚动。

相对位置可以通过使用 position 属性来设置。position 属性可以设置为 static、relative、absolute 或 fixed。其中，static 意味着元素遵循正常的文档流，relative 意味着元素相对于它原来的位置进行定位，absolute 意味着元素相对于最近的有定位（非 static）的父元素进行定位，fixed 意味着元素固定在浏览器窗口的某个位置，直到页面滚动，或者fixed 元素被移出视口。

因此，为了实现相对定位，需要设置元素的 position 属性为 relative，同时使用 top、left、bottom、right 属性来指定元素相对于定位元素的位置。

接下来，让我们来看一下使用相对位置实现滚动固定效果的示例代码。

<!DOCTYPE html>
<html>
<head>
	<title>相对位置实现滚动固定效果</title>
	<style>
		.container {
			position: relative;
			width: 300px;
			height: 200px;
			overflow: scroll;
		}

		.fixed-element {
			position: absolute;
			top: 50px;
			left: 50px;
			width: 100px;
			height: 100px;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="fixed-element"></div>
	</div>
</body>
</html>

在上面的示例代码中，.container 是一个有滚动条的容器，使用 position: relative; 来设置它的相对位置。.fixed-element 是一个固定在容器中某个位置的元素，使用 position: absolute; 来设置它的绝对位置，top、left 属性来指定它相对于容器的位置。

在这个例子中，.fixed-element 的 top 属性设置为 50px，left 属性设置为 50px，这意味着固定元素距离容器左上角的位置为 50px，50px。

当容器滚动时，.fixed-element 仍然保持在原来的位置。

希望这个例子能够帮助您理解如何使用相对位置实现滚动固定效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

内容高度小于窗口高度时版权 div 固定在底部

网站建设中经常遇到文档内容高度小于窗口高度时底部版权 div 固定在底部的问题，纯 css div 底部不太好解决这个问题，这里使用 js 代码来对检测文档高度和窗口高度来实现。...//js 代码调用方法说明：lrFixFooter("div.footerwarp"); 传入 div 固定底部的类名或者 ID 名在制作这个 js 的时候发现个 IE8 的 bug $(document...doctype html> 文档内容高度小于窗口高度时底部版权始终在底部-懒人建站 ... 网站建设中经常遇到文档内容高度小于窗口高度时底部版权始终在底部的问题，纯css

2K3 0

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置...加上一点特别的效果： 4.在样式表文件中定义好一个类...举例： 2，页面有多个div块，如何让...body页面不使用滚动条，只在某个div内使用滚动条先说说正常显示的，显示滚动条和不显示滚动条，效果图如下：代码： iframe 中始终显示滚动条：</h3...2，另外可能会出现关闭了整个body的滚动条后，发现div的滚动即使启动了也没有显示，这种情况可能是没有设置此div的高度或宽度，这是需要设置的。

4.7K3 0

IE7下面固定尺寸的 div 滚动样式设置的一个BUG

今天我在编辑html页面的时候使用到一个固定尺寸的div，这里就叫它wrapper吧。...wrapper里面是列表内容，wrapper一开始被我设置成了固定大小，然后overflow-y: auto，即我希望这个div里面超出的内容能够通过在div内向下滑动查看。...其他的浏览器都没有问题，只是在IE7下面超出的内容一部分并没有隐藏（特别是列表中的图片），而是超出了div全都显示在页面中，同时滚动条还在。

6874 0

CSS | 视差滚动 | 笔记

background-attachment：决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。它的属性值的含义如下：属性值含义 fixed 背景相对于视口固定。...即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动 local 背景相对于元素的内容固定。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素 css_demo 设置 overflow: scroll，当元素内容超出页面时滚动。...在视差滚动中，"向内移动"和"向外移动"是相对于观察者（即浏览器窗口）的视角来说的。当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。

7302 1

【CSS】面试官问我视差滚动怎么实现？我懵了...

可以通过两种方式来实现：background-attachment和transform:translate3D1、background-attachmentbackground-attachment：决定背景图像的位置是在视口内固定...它的属性值的含义如下：属性值含义fixed背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容local背景相对于元素的内容固定。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置 transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

1891 0

Bootstrap实战 - 单页面网站

并且给导航栏添加样式 navbar-fixed-top 使其固定在顶部不随滚动条移动而移动，但这样的话会遮住 body 上面的一部分内容，所以同时给 body 添加样式 padding-top: 60px...相对应，不然会看不到效果。触发监听依赖元素的属性 id="nav-menu"，滚动监听的效果是由样式为 scrollspy（这里可以是任意值，只是做个示例）载体在其容器的滚动条变化时，随着载体的内容在视觉中的变化...这里的滚动条对应的是 body 元素，所以给 body 元素加上属性 data-spy="scroll" 和 data-target="#nav-menu"（这里的值对应导航的 id 值），同时加上相对定位样式...这时移到最顶部时不能合理定位到第一个导航部分，因为上面给了 body 元素一个 60px 的内边距，这里给 body 元素增加一个属性 data-offset="60"，使滚动监听在计算滚动位置是相对于顶部有一个偏移量

8.9K10 4

【CSS】面试官问我视差滚动怎么实现？我懵了...

background-attachment和transform:translate3D 1、background-attachment background-attachment：决定背景图像的位置是在视口内固定...它的属性值的含义如下：属性值含义 fixed 背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容 local 背景相对于元素的内容固定。...如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。...scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。对父元素css_demo设置overflow: scroll，当元素内容超出页面时滚动。...通过设置transform-style和 perspective，使该容器的子元素处在3D空间中，然后设置transform: translateZ使物体在滚动的时候在Y轴移动位移不同，产生视觉差。

2212 0

【前端攻略--HTMLCSS】html 文档流的理解

当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。基于文档流，理解以下的定位形式: 相对定位：元素框偏移某个距离。...固定定位：即完全离开文档流，相关于视区进行偏移。文档流是文档中可显示对象在排列时所占用的位置。...当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 fixed：固定定位。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。...当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置。 relative：相对定位。...对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。 static：元素框正常生成。

2.4K2 0

问题总结

关于CSS中position定位：开始学习的时候简单粗暴的总结了 absolute; 绝对定位（相对于浏览器边界），拉动滚动条，位置随之改变。...fixed 固定位置：相对于浏览器窗口，拉动滚动条，位置不变。 relative 相对定位，相对于该元素本该出现的位置：在原本应该出现的位置偏移。...fixed（固定定位）这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。...简单来说，如果div中没有设置定位，他里面再套一个div设置绝对定位，里面的div不会出现在外面div里面。如果两个div都设置absolute，里面的div就是相对外div来进行定位的。...现在的理解可能还是错误的，毕竟没有经过大量的应用来体会，附上一个链接：http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html 希望经过大量的理解应用之后能更加透彻的明白

6315 0

CSS固定定位与粘性定位4大企业级案例

前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。...fixed 固定定位相对于浏览器窗口进行位置调整 sticky 粘性定位是基于用户的滚动位置来定位。固定定位相对于浏览器窗口进行定位，其它与绝对定位的特性一致。...常见的应用有：楼梯式导航、浏览器右侧菜单、底部通栏、全屏黑色半透明遮罩弹出层、弹出注册和登录框、左上固定右自适应后台管理系统布局粘性定位当滚动的高度>元素与浏览器的高度时，会以fixed固定定位显示...当滚动高度<元素与浏览器高度时，会以relative相对定位显示。...，右自适应后台管理界面布局（固定定位应用）顶部导航和左侧菜单相对于浏览器固定定位。

1.6K3 0

Position定位

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。...，元素的位置相对于浏览器窗口是固定位置，即使是窗口滚动元素也不会移动，注意在中的元素使用fixed是相对于进行定位的，类似于在页面中创建了一个新的浏览器窗口...，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position: relative，而当页面滚动超出目标区域时...sticky的表现类似于position: fixed，它会固定在目标位置，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，这个特定阈值指的是top、right、bottom、left其中之一... 让浏览器出现滚动条每日一题 https://github.com/WindrunnerMax

1K2 0

css中绝对定位_绝对定位和相对定位怎么用

绝对定位水平居中固定定位参考点相对定位 position: relative; .box1{ width: 200px; height...滚动条滚动时，距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...，与页面位置不变，跟浏览器位置没关系： bottom属性描述时，以首屏页面左下角为参考点如果浏览器不动，滚动条动的时候，红色盒子跟随页面动，红绿盒子间距不变。...class="box"> 固定定位 1.脱标 2.提升层级 3.固定不变...：固定当前的元素不会随着页面滚动而滚动，特性：1.脱标 2.提升层级 3.固定不变不会随页面滚动而滚动参考点：设置固定定位，用top描述。

2.6K3 0

CSS 定位详解

3.3 fixed 属性值 fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。 ?...div { position: fixed; top: 0; } 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...因此，它能够形成"动态固定"的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。 ? 页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。 ?...除了上面提到"动态固定"效果，这里再介绍两个。 5.1 堆叠效果堆叠效果（stacking）指的是页面滚动时，下方的元素覆盖上方的元素。...div { position: sticky; top: 0; } 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。

1.8K4 0

滚动视差让你不相信“眼见为实”

我是在最近的项目中用到了这块，觉得有必要整理一下。本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。什么是视差滚动？...说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。看完上面这段，相信你对视差滚动的概念已经有了一个初步的了解。...background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。它一共有三个属性: fixed: 键字表示背景相对于视口固定。...即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。 local: 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动。...scroll: 此关键字表示背景相对于元素本身固定，而不是随着它的内容滚动。

2.1K7 6

js怎么让指定方法先后顺序_jquery固定table表头

* 功能：固定表头 * 参数 viewid 表格的id * scrollid 滚动条所在容器的id * size 表头的行数（复杂表头可能不止一行） */ function scroll...// 将拷贝得到的表格在删除数据行后添加到创建的div中　　bak.appendChild(tb2); 　　// 设置创建的div的position属性为absolute，即绝对定于滚动条容器（...= 0; 　　// 设置div的top属性为0，初期时滚动条位置为0，此属性与left属性协作达到遮盖原表头　　bak.style.top = “0px”; 　　bak.style.width...= “100%”; 　　// 给滚动条容器绑定滚动条滚动事件，在滚动条滚动事件发生时，调整拷贝得来的表头的top值，保持其在可视范围内，且在滚动条容器的顶端　　container.onscroll...　　　　　　//相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况　　　　　　//如果有必要也可以设置一个z-index属性　　　　　　(this)

7.3K2 0

CSS-定位(position)

# 相对定位relative(自恋型) 相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。...父盒子布局时，需要占有位置，因此父亲只能是相对定位. 这就是子绝父相的由来。 <!...当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。...不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。固定定位有两点：固定定位的元素跟父亲没有任何关系，只认浏览器。...固定定位完全脱标，不占有位置，不随着滚动条滚动。 # 叠放次序（z-index）当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

1.5K1 0

动手练一练，手写一个价格对比、固定表头滚动的表格

今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。...scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。...在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。...scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。...3、编写滚动的相关逻辑每次我们滚动时，就会执行我们定义的 scrollHandler 函数，我们这个函数只会在窗口宽度大于 780px 才会执行固定表头的逻辑，小屏设备则没有相关效果。

3.2K3 1

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位是固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; 固定定位完全脱离标准流 , 不占用布局中的位置 , 漂浮在任何元素上方...; 固定定位只相对于浏览器可视窗口进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位与父元素没有任何关系 ; 固定定位与滚动条滚动没有任何关系 ;...固定定位的元素始终显示在浏览器可视窗口的固定位置 , 不会改变 ; 注意相对的是浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; 固定定位的本质是一种特殊的绝对定位 ;...1000 像素, 方便滚动设置 */ body{ height: 1000px; } /* 最外层父容器盒子 */ .box { /* 子元素设置绝对定位父元素需要设置相对定位...div> 展示效果 : 默认进入后的样式 : 滚动拖动条后的效果 :

1.8K2 0

滚动视差？CSS 不在话下

background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。这里的关键在于，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。...也就是说，背景图从一开始就已经被固定死在初始所在的位置。...而是相对于视口固定死了。...CodePen Demo -- CSS 3D parallax 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

1.7K3 0

滚动视差？CSS 不在话下

background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。...fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。这里的关键在于，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。...也就是说，背景图从一开始就已经被固定死在初始所在的位置。...而是相对于视口固定死了。...，效果如下： [css3dparallax] 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

1.9K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭