开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

怎样才能让多个div(相同的)是"position: sticky“而不与css相互重叠？

要让多个相同的div元素具有position: sticky属性，并且不重叠，可以遵循以下步骤：

为每个div元素设置唯一的id属性，以便能够针对每个元素进行样式设置和定位。
使用CSS选择器为每个div元素添加相同的类名，以便能够批量应用相同的样式。
为每个div元素设置position: sticky属性，以使其在滚动过程中保持固定位置。
为每个div元素设置top属性，以确定其相对于其容器顶部的偏移量。确保设置不同的偏移量，以避免重叠。

下面是一个示例代码：

HTML代码：

<div id="sticky-1" class="sticky-div">Content 1</div>
<div id="sticky-2" class="sticky-div">Content 2</div>
<div id="sticky-3" class="sticky-div">Content 3</div>

CSS代码：

.sticky-div {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px;
  margin-bottom: 10px;
}

在上述示例中，每个div元素具有相同的类名.sticky-div，并具有不同的id属性。通过设置position: sticky和top: 0，这些div元素将在滚动时固定在容器的顶部，并且不会相互重叠。background-color、padding和margin-bottom是用于美化的辅助样式。

腾讯云相关产品和产品介绍链接地址：

腾讯云产品：云服务器（CVM）- https://cloud.tencent.com/product/cvm
腾讯云产品：轻量应用服务器（Lighthouse）- https://cloud.tencent.com/product/lighthouse
腾讯云产品：弹性伸缩（Auto Scaling）- https://cloud.tencent.com/product/as
腾讯云产品：对象存储（COS）- https://cloud.tencent.com/product/cos
腾讯云产品：容器服务（TKE）- https://cloud.tencent.com/product/tke

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

有帮助

没帮助

相关·内容

知识整理之CSS篇

| fixed | sticky | inherit position: static 默认值。...position: sticky（CSS3）粘性定位，该定位基于用户滚动的位置。在常态时,它的行为就像 position:relative，遵循常规流。...BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。...什么是外边距重叠外边距重叠： margin-collapse 垂直相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。...css sprite是什么？有什么优缺点？将多个小图标he拼接到一张图片里，通过background-position和元素尺寸调节需要显示的背景图案。

1.6K2 0

【前端就业课第二阶段】CSS 零基础到实战（04）定位

在 HTML 中，默认情况下一个网页是多个元素从上而下自动进行排列而成，并且是一行一行组成，这些行中的元素则是从左往右默认进行排列，当元素超过其宽度大小则会进行换行，而这就是文档流。...fixed sticky 在本章开始时，了解了相对定位和绝对定位，而后又了解了 position 定位的属性值，这些值对应了相对定位和绝对定位，例如：相对定位的 position 属性值有 relative...css 样式相同时发生了 div 重叠，效果如下：在此时需要第二个 div 不再被红色覆盖，可以在样式中添加 z-index 属性：其效果如下： 1.4 absolute...绝对定位绝对定位是脱离文档流而存在的，如何脱离咱们可以接下来的示例进行查看。...首先我们需要知道一个点，绝对定位的父元素不能是 static ，也就是 position不能是 static，而 static 是position 的默认值，也就是说直咱们需要一个 div 设置为 relative

2832 0

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...div { position: fixed; top: 0; } 1 2 3 4 复制上面代码中，div元素始终在视口顶部，不随网页滚动而变化。...div { position: sticky; top: 0; } 1 2 3 4 复制它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。...# 5.2 表格的表头锁定大型表格滚动的时候，表头始终固定，也可以用sticky实现（查看 demo ）。 CSS 代码也很简单。...Vant：有赞前端团队开发的轻量级移动端 Vue 组件库，让你快速使用已经封装好的各种页面组件。

1.7K1 0

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。 display属性指定网页的布局。两个重要的布局，我已经介绍过了：弹性布局flex和网格布局grid。...div { position: fixed; top: 0; } 上面代码中，div元素始终在视口顶部，不随网页滚动而变化。... CSS 代码极其简单...div { position: sticky; top: 0; } 它的原理是页面向下滚动时，每张图片都会变成fixed定位，导致后一张图片重叠在前一张图片上面。详细解释可以看这里。...5.2 表格的表头锁定大型表格滚动的时候，表头始终固定，也可以用sticky实现（查看 demo）。 ? CSS 代码也很简单。

1.8K4 0

使用CSS实现底部固定广告Banner与自适应内容区域

页面内容区域：占据除广告Banner外的所有空间，支持滚动，高度自适应。无重叠：两个区域之间不能有任何重叠。不使用JavaScript：完全依赖CSS实现。解决方案1....使用Flexbox布局Flexbox是一个强大的CSS布局模型，它允许我们轻松地对齐和分配容器中项目的空间，即使它们的大小未知或是动态变化的。...但为了确保它始终固定在底部，我们需要使用position: sticky;结合bottom: 0;。...修正position: absolute;的副作用使用position: absolute;会将元素从文档流中移除，这可能导致内容区域与广告Banner重叠。...然而，由于广告Banner的高度未知，我们在这里假设一个合理的最小值，或者使用CSS变量（如果广告Banner的高度是动态确定的，并且可以通过JavaScript设置CSS变量，则可以在这里使用）。

1681 0

CSS基础教程学习总结

定位 3.1 示例图 3.2 代码 css /* 关于static的几种定位：static、fixed、relative、absolute、sticky */ div.static { /*...height: 30px; top: 20px; } div.sticky { /*和flex定位有些相似，但是又有些不同 sticky是粘的意思，一开始可以自由滑动，当到一定位置时就会在那里不动...*/ /* 对于Safari浏览器 */ position: -webkit-sticky; position: sticky; /* 到顶部20px位置不动 */...-- sticky定位 --> 这个是sticky定位四、CSS float...而clear：both会清除浮动，默认为正常的文档流。

9825 0

移动端吸顶fixbar解决方案

在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。...在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。...2、sticky元素的底部，不能和父级底部重叠。...= null; if(g.CSS && g.CSS.supports){ return g.CSS.supports("(position: sticky)...div.style.position = "-webkit-sticky"; if("-webkit-sticky" === div.style.position){

3K3 0

CSS粘性定位 - 它的真正工作原理！

这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。 CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。...static 和 relative 保留其在文档流中的自然空间，而 absolute 和 fixed 则不保留空间，它们具有浮动行为。而新的sticky定位具有所有类型的相似性。...这样做的原因是，当一个元素被赋予sticky定位样式时，粘性元素的容器是粘性元素可以粘住的唯一区域。这个元素没有其他元素可以浮动，因为它只能浮动在兄弟元素上，而作为唯一的子元素，它没有兄弟元素。...CSS Sticky 定位的真正工作原理！ CSS 的 sticky 定位有两个主要部分，即粘性元素和粘性容器。粘性元素 - 是我们使用 position: sticky 样式定义的元素。...Fixed - 当项目固定时，它的行为与 position: fixed 完全相同，浮动在视口的相同位置，从流中移除。

2882 0

Position定位

Position定位 CSS中position属性是比较常用的元素定位方案，position常用的取值有static、relative、absolute、fixed、sticky、inherit。...脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。....t5{ position: fixed; top: 300px; } sticky sticky是粘性定位，元素的位置是基于用户的滚动位置来定位...，粘性定位的元素是依赖于用户的滚动，在position: relative与position: fixed定位之间切换，在页面显示时sticky的表现类似于position: relative，而当页面滚动超出目标区域时....t6{ position: sticky; top: 0; } inherit inherit是通过继承父元素的position值来进行定位。

1K2 0

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。...BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。...从运行结果可以看出div与p还是重叠了，只是文字被挤出，和前面提到的重叠是同一个意思，将p元素触发BFC后的效果如下图所示： p{ overflow...二、定位使用css布局position非常重要，他的语法如下： position：static | relative | absolute | fixed | center | page | sticky...默认值：static，center、page、sticky是CSS3中新增加的值。

3.6K8 0

BFC背后的神奇原理

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。一、BFC是什么？...Box: CSS布局的基本单位　　Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。...Formatting context 　　Formatting context 是 W3C CSS2.1 规范中的一个概念。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

8031 0

什么是BFC？看这一篇就够了

Box：css布局的基本单位 Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。...Formatting Context Formatting context 是 W3C CSS2.1 规范中的一个概念。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来，然后激活它使其成为一个BFC <!...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

6532 0

块格式化上下文（BFC）布局规则及常见情景

Box: CSS布局的基本单位 Box是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。...run-in box: css3中才有，这儿先不讲了 Formatting context Formatting context是W3C CSS2.1规范中的一个概念。...它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。...二、哪些元素会生成BFC 根元素或其它包含它的元素浮动 (元素的 float 不为 none) 绝对定位元素 (元素的 position 为 absolute 或 fixed) 行内块 inline-blocks...因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

1.6K4 0

IT课程 CSS基础 028_浮动、定位、对齐

浮动在 CSS 中，浮动是一种布局技术，通过 float 属性来使元素在页面中沿着容器的左侧或右侧浮动，使得其他元素能够环绕它。...> div-right 效果：浮动元素可能导致父元素的高度塌陷，可能导致其他DIV的元素受到影响，多个浮动元素在同一行可能会重叠，需要使用...定位在 CSS 中，定位是指通过 position 属性来设置元素的定位方式，以及通过 top、right、bottom、left 属性来指定元素相对于其最近的已定位的父级元素们的位置。..."> 效果：层叠顺序（重叠元素） z-index 是 CSS 中用于控制层叠顺序（层叠顺序）的属性..."base z-index-example2"> 对齐 CSS 对齐是指通过 CSS 属性来控制元素的水平和垂直对齐方式。

1251 0

如何运用position:sticky实现粘性布局？

前言如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？...否则其行为与相对定位相同。兼容性讲述具体示例之前，还是很有必要了解一下 position:sticky 的兼容性，除了IE以外了，其他新版浏览器都是Ok的，当然，很多老浏览器都是不行的。...position:sticky 示例看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做？ ?...注意 position:sticky 的生效是有一定的限制的，总结如下：须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。...如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

2K2 0

CSS&HTML面经专题——（三）CSS定位盒模型经典布局浮动布局与BFC

CSS&HTML面经专题一、position定位 position：static | relative | absolute | fixed | center | page | sticky 默认值...：static， center、page、sticky是CSS3中新增加的值。...元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky 对象在常态时遵循常规流。...CSS呈流式布局，div默认宽度填满，即100%大小，给out_wrapper设置margin: 0 10px;相当于让左右分别减少了10px。...grid 或 inline-grid 元素的直接子元素） BFC渲染规则 BFC垂直方向边距重叠 BFC的区域不会与浮动元素的box重叠 BFC是一个独立的容器，外面的元素不会影响里面的元素计算BFC

2K3 1

你不知道的 CSS - by Chrome 2019

官方描述： The position CSS property sets how an element is positioned in a document....利用这个属性，我们可以轻松应对日常中的吸顶需求：示意图：核心属性： position: sticky; top: 0; 完整示例代码： // html dl.sticky-stack dt...比如一横列的图片滑动之后，看到的刚好是一个在视区中的完整图像，这个可以使用 js 处理滑动事件，动态计算X坐标来实现。现在CSS也支持了，这个特性就是Scroll Snap....LTR 2 3 4 5 //css .container { display...以往我们做列表的时候，要控制元素到其他元素的间距，往往使用的是margin, 利用的是外边距重叠的特性，这就是图中的 extra spacing, 而现在有了gap, 我们就有了更优雅的解决办法：

7404 0

Web 前端 | 面试题 | 笔记

CSS 2.1 position 属性的值有哪些及其区别 position属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。...固定定位 fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。...important 标记的样式属性优先级最高；样式表的来源相同时： !...的值不为visible BFC的使用场景去除边距重叠现象清除浮动（让父元素的高度包含子浮动元素）避免某元素被浮动元素覆盖避免多列布局由于宽度计算四舍五入而自动换行 3....GET请求在URL中传送的参数是有长度的限制，而POST没有限制 3.安全性不同.

7474 0

CSS 常见面试题速查

元素 E[attr~=val] 匹配所有 attr 属性具有多个空格分隔的值、其中一个值等于 val 的 E 元素，如具有多个 class 名的元素 CSS 3 E[attr^="val"] 属性值...和 @import 的区别 link 属于 XHTML 标签，而 @import 是 CSS 提供的页面被加载时，link 会被同时加载，而 @import 引用的 CSS 会等到页面加载完再加载...Formatting Context) Box: Box 是 CSS 布局的对象和基本单位，一个页面由很多个 Box (盒模型) 组成 Formatting context：块级上下文格式化，是页面中的一块渲染区域...，并有一套渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用即，它是一块独立的区域，让处于 BFC 内的元素与外部元素相互隔离如何形成根元素 position：fixed/absolute...# 关于媒体查询是什么媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪

9071 0

什么是BFC

2019-06-05 17:36:43 BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。...position属性中最有意思的就是sticky了，所以想在这里多说一点。...设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、...">我是一个左浮动的元素我是一个没有设置浮动, 也没有触发 BFC 元素...左浮动的元素会盖住未浮动元素一部分区域，但是文字不会被覆盖，形成了文字环绕的效果，如果不想这样，我们可以采用BFC的方式，和上面的例子相同，添加一个overflow:hidden来触发BFC即可 <div

8512 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭