避免多个粘性的div彼此重叠，只使用CSS (无javascript)
要避免多个粘性的div彼此重叠，只使用CSS（无JavaScript），可以使用CSS的flexbox布局或者grid布局来实现。
- Flexbox布局： Flexbox是一种用于页面布局的CSS模块，它提供了一种灵活的方式来排列、对齐和分布元素。通过设置容器的display属性为flex，可以创建一个flex容器，然后通过设置容器内元素的flex属性来控制它们的大小和位置。
优势：
- 简单易用，只需少量的CSS代码即可实现布局需求。
- 自适应性强，可以根据容器的大小自动调整元素的位置和大小。
- 可以实现水平和垂直方向上的布局。
应用场景：
- 页面的导航栏布局。
- 列表或网格的排列布局。
- 页面的侧边栏和主内容布局。
推荐的腾讯云相关产品：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- Grid布局： Grid布局是一种二维布局系统，通过将容器划分为行和列的网格，可以更精确地控制元素的位置和大小。通过设置容器的display属性为grid，可以创建一个grid容器，然后通过设置容器内元素的grid-area属性来指定它们在网格中的位置。
优势：
- 提供了更强大的布局能力，可以实现复杂的网格布局。
- 可以通过自动布局和对齐方式来简化页面的响应式设计。
- 可以方便地控制元素的层叠顺序。
应用场景：
- 复杂的表格布局。
- 图片墙或瀑布流布局。
- 多列文章布局。
推荐的腾讯云相关产品：
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云数据库MongoDB版（CMongoDB）：https://cloud.tencent.com/product/cdb_mongodb
- 云存储（COS）：https://cloud.tencent.com/product/cos
以上是使用CSS（无JavaScript）避免多个粘性的div彼此重叠的方法和相关推荐的腾讯云产品。
相关·内容
1回答
当一个粘性div进入视图时，如何阻止它与另一个粘性div重叠？目前，如果我有多个粘性div，它们都堆叠在一起，直到到达最后一个粘性项，然后它们都一起向上移动，但我希望sticky 1保持粘性，直到sticky 2击中它，然后它向上移动，Sticky 2保持在原地，直到sticky 3击中它，然后它向上移动-所以没有重叠...
所以下一个div实际上是粘性div的边界。
还有：top:50%会一直让它完全垂直居中吗？
HTML
<div class="sticky-container">
<div class="sticky-this">
浏览 16提问于2021-05-31得票数 0
3回答
我想要一个导航栏粘在视窗的底部，但防止它重叠固定高度粘性页脚。
标记如下：
<div id="wrap">
<div id="main"></div>
</div>
<div id="footer"></div>
<div id="command-bar"></div>
并且CSS是按照的。
你可以在上看到一个例子。
更新
当非常慢地向后滚动时()，与下面的JavaScript越来越接近，只是看起来有点重叠。
$(function
浏览 2提问于2013-01-17得票数 1
1回答
我尝试用下面的代码制作一个粘性的DIV，但是它并不像预期的那样工作。当我向下滚动，DIV是粘性的，但它重叠到网站的标题以及页脚。如何使用CSS/JS解决这个问题？任何帮助都会appreciable.Thanks。
.a{
float: left;
width: 67%;
}
.b{
width: 32%;
float: right;
position: fixed;
right: 0;
}
.c{
width: 100%;
}
<div class="c">
<div class="a"
浏览 3提问于2020-07-08得票数 2
回答已采纳
我正在用Angular创建一个网站，并且必须在右边做一个粘性的盒子。粘性框将在它自己的div中保持粘性。但是，我需要这个div与实际内容重叠，因为背景颜色需要在这个粘性框后面可见。 我添加了一张图片以使其更清晰。 黑色部分是div，不应该与粘性部分重叠，红色/粉色div是内容，每个div都有不同的颜色。我要把粘性盒子放在绿色盒子里。 红色/粉色部分中的内容都有65%的宽度，因此粘性框不会与实际内容重叠。 https://i.gyazo.com/734f1e00797ae782d71046dfceba6f78.png 我如何才能做到这一点？
浏览 6提问于2019-04-05得票数 1
回答已采纳
6回答
我是Bootstrap的新手，我正尝试在Symfony2中使用它。我已经有一个主要的顶部栏粘性，用于导航。我的问题是，当我试图添加一个类似的页脚，它是粘性的底部，但它重叠了我的内容。我使用JQuery脚本来避免顶部导航栏的问题，如下所示：
$(document).ready(function(){
$(document.body).css('padding-top', $('#topnavbar').height());
$(window).resize(function(){
$(document.bod
浏览 0提问于2014-10-13得票数 24
2回答
这是jquery
<script type="text/javascript">
$(document).ready(function () {
$('#showhidetarget').hide();
$('a#showhidetrigger').click(function () {
$('#showhidetarget').toggle(150);
});
});
</script>
这是我的粘性标题导航CSS
浏览 0提问于2012-10-22得票数 3
回答已采纳
1回答
因此，我有一个jsfiddle描述了一个具有粘性页脚区域的可内容的div，表示：。
CSS
.textarea {
background: white;
padding: 20px;
min-height: 20px;
width: 100%;
}
.footer {
height: 20px;
position: sticky;
bottom: 0;
background: blue;
}
HTML
<div class="textarea" contenteditable="true"></div>
&
浏览 2提问于2017-03-31得票数 0
回答已采纳
我正在做一个主页，它将在整个网站周围使用“自定义”边框。
这就是我想用我的div实现的。
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
所有边角(左/右、上、下边框)都有固定的宽度和高度。
中、上/下边框有固定的高度，但应扩展到站点的全部宽度。
中、
浏览 1提问于2013-03-15得票数 0
1回答
为什么我的代码会有如此严重的延迟。我希望这个div能够根据窗口的尺寸滑入并滑出。但每次都有延误。长度从来都不一样。我应该使用超时函数吗？还是我的代码出了什么问题？
<!DOCTYPE html>
<html>
<head><style type="text/css">div {
background-color: brown;
width: 100px;
height: 100px;
position: relative;
display: none;
left: -120px;
}
</style&
浏览 1提问于2014-05-13得票数 0
回答已采纳
2回答
可以用粘性页眉制作粘性页脚吗？
一切都很好，但当我应用粘性标题时，我需要为它制作body { padding-top: 60px; }，使其不与内容重叠。那么问题就是我的页脚在页面下方。
小提琴：
HTML
<div class="wrap">
<div class="header">STICKY HEADER</div>
<div class="content">CONTENT
<br />CONTENT
<br />CONTENT
<
浏览 8提问于2013-01-15得票数 1
回答已采纳
6回答
我不太确定为什么粘性页脚在Bootstrap 4中不起作用。我有一个TYPO3网站，我还是个初学者。
粘性页脚没有粘在页面底部。
这里是页面源代码的一个副本，因为它已经被呈现。
我基本上是从bootstraps docs文件夹中复制html文件，然后对其进行修改并将其复制到我的TYPO3模板中。
如果我用内容填充页面，页脚就不会卡住-我必须向下滚动页面才能看到它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title&
浏览 3提问于2017-10-13得票数 58
我想要创建粘性底部工具栏，总是停留在底部。它应该总是可以在屏幕上看到。我试着使用position: fixed, bottom: 0，这确实有帮助，但它与我的内容重叠。以下是它如何重叠(查看页面底部)：
是的，我知道它应该重叠，但问题是我不能滚动到底部看到剩余的文本。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
padding: 0;
浏览 1提问于2020-04-25得票数 2
回答已采纳
1回答
我想创建一些类似于WhatsApp的聊天。我的问题是，当我把日期设置为今天，昨天，一些日期，我需要粘性。
问题是div有重叠
我不能用容器包装同一日期的项目，因为它们是动态的，我从JSON/ajax调用中获得它们作为分隔项，进行了一些javascript操作，然后将它们追加到末尾。
我做了一个代码-
打开它时，滚动到底部，您可以看到日期的div被重叠的问题。
浏览 2提问于2022-09-29得票数 3
3回答
我正在尝试为我的WordPress站点()创建粘性标题。我已经安装了最新的店面主题，但我似乎不能得到我的标志，导航，购物车和搜索所有在同一行。我想是因为它们都在单独的div中吧？
我希望我的头看起来像当它完成。
此外，当我这样做时，管理栏会遮盖粘性标题，粘性标题会遮盖正文：
#masthead {
position: fixed;
top: 0;
width: 100%;
}
我能用CSS解决这个问题吗?还是必须使用javascript？
浏览 10提问于2017-12-12得票数 0
2回答
在我的布局中，我创建了以下jsfiddle托管的可调整大小的粘性页脚。但是，在调整大小时，它与内容重叠。是否有任何方式使它在所有浏览器上响应？
$(function () {
$('.footer').resizable({
handles: 'n, s'
}).bind('resize', function(){
$(this).css("top", "auto");
});
});
<div class="footer">
浏览 8提问于2014-11-05得票数 0
回答已采纳
1回答
我正在尝试使用墨水的粘性js模块来工作。出于某种原因，这并不是。我还注意到，如果我将该<div className="ink-sticky"> <div className="ink-alert basic">Hey I stick to the top when you scroll!</div> </div>从我的react组件(当然，并将className更改为类)中取出，并且直接在我的index.html中过了它，粘性就能正常工作。
我的反应组件：
const Content = Componen
浏览 3提问于2016-06-27得票数 0
回答已采纳
3回答
CSS粘滞条重叠
、、
我使用的是的粘性脚注代码，由于某种原因，粘性脚注与我的站点上的.content类重叠。
我的网站：
正如您所看到的，当您滚动到任何给定页面的底部时，底部的910x50px图像会与白框重叠。
我需要910x50px的图像在白盒的底部，当你滚动到底部时。
白盒.content类的CSS
.content {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: auto;
width: 50%;
background: white;
}
粘性页脚.player类的CSS
.player {
position: fix
浏览 9提问于2016-08-15得票数 0
回答已采纳
1回答
我正在尝试制作一个包含3个元素的页面:页眉、页脚和内容。顾名思义，我希望页眉贴在顶部，页脚贴在底部，内容贴在两者之间。我已经做了一个布局，它把页眉和页脚放在它们应该在的地方，但是内容要么与它们重叠，要么反过来，内容应该变得更小。
我的问题是页眉和页脚将用于许多不同的事情，因此当涉及到高度时，它们是动态的。
有没有办法让内容填满页眉和页脚之间的空白处，而不重叠它们呢？
如果可能，我会更喜欢纯CSS，但如果这是不可能的，我也想要一个JavaScript的建议。:)
谢谢!
编辑:这是我拿到的自动取款机。
<div class="container">
<d
浏览 3提问于2012-08-22得票数 0
1回答
我正在尝试制作一个带有“粘性”表头的表格。我将位置设置为绝对，它就可以工作了，但是现在标题水平溢出了表格边框，甚至覆盖了滚动条。如何才能使元素成为绝对元素，但在视觉上仍然包含在其父元素中？ 很难准确地显示我的代码，因为我正在尝试修改Kibana，并且涉及许多不同的文件，但这里是我在简化示例中最好的尝试： HTML： <div>
<table>
<thead>
<tr class="headerRow">
<th>...</th>
浏览 15提问于2020-10-21得票数 0
2回答
网格项与位置重叠
、、、、
我对firefox中网格容器中的粘性项有问题。
我已经创建了一个网格容器，每个容器有8项100 of：
第一项是粘在左边。
第8项粘在容器的右侧。
当我滚动到网格容器的右边时：
在Chrome (80.0.3987.122)，一切都很好。第7项和第8项以及彼此之间(容器的初始scrollWidth为800 of )
然而，在Firefox (73.0.1 (64-bit)中，项目7和8是重叠的(容器的初始scrollWidth为700 In )。
有人知道如何在Firefox中解决这个问题吗？
请看附件中的片段。
谢谢!
setTimeout(() =>
浏览 3提问于2020-03-03得票数 2
回答已采纳
我已经在stackoverflow上阅读了几个关于z-index的问题/文章，但我仍然不能解决我网页上z-index属性的最后一个问题。
一个简单的问题是:无论z索引值如何，带有position:absolute的元素总是与带有postion:relative的元素重叠吗？
我需要强制position:relative;z-index:50元素与postion:aboslute;z-index:5;元素重叠。如果有必要，我甚至会使用脚本。
有一个关于这个问题的网页：
注意:该网页高度基于z-index，并且有许多不优雅的css解决方案(粘性页脚，背景重复)。I它几乎可以工作了，但是正如你所看到
浏览 3提问于2011-05-16得票数 2
回答已采纳
我需要堆叠一些像这样的粘性头部元素：
在的stackover中有这个问题的解决方案。但在我的例子中，我的粘性头部具有动态高度。因此，不可能硬编码顶端位置的粘性标题。我的代码如下：
html
<div class="sticky-header1">
Header 1 with dynamic height
</div>
<div>
Header 1 content
</div>
<div class="sticky-header2">
Header 2 with dynamic
浏览 0提问于2019-05-29得票数 4
我是否可以使用CSS (没有图像作为背景)创建这样的填充，以及如何创建？
我的意思是-我有两个div充满了两种颜色，但我可以填补他们只有正常的颜色，但我需要一个“重叠”的部分。
也许我需要两个div，然后用background-color填充它们，第三个div填充两个重叠的背景色。然而，我不知道如何创建这个重叠的部分。
浏览 2提问于2015-10-29得票数 3
回答已采纳
2回答
我正试着为我的艺术作品集创建一个自己的网站，结果我遇到了。我在为它添加额外的元素时遇到了问题。
我有以下HTML结构：
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
浏览 0提问于2011-12-13得票数 1
1回答
我使用的是库，原则上是添加这个css。
position: sticky;
top: 0;
对于我的html <div class="sticky">..otherstuffhere</div><OtherComponent />来说，这很好，因为当我向下滚动时，组件总是停留在顶部。
我的问题是，该组件正在超过其他八进制重叠，我想保持在顶部+相同的距离始终保持不变。
在上面的图像中，由于隐私原因，白色被删除，但基本上是文本和其他组件。我希望完成取消菜单是粘性的，但总是在其他组件之前。顶部也有一个标头，所以顺序是
“headerthe粘性
浏览 1提问于2022-06-20得票数 0
HTML如下所示。
<div id="leftcontainer">
<div id="anothercontainer">
<ul id="items">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>...</li>
浏览 3提问于2010-09-01得票数 2
回答已采纳
1回答
有重叠的过渡
、、、
因此，我有两个div是重叠的，由我的CSS设置如下所示。
HTML：
<body onLoad="present();">
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
</div>
<div class=&#
浏览 0提问于2016-03-16得票数 0
回答已采纳
1回答
假设我有一个div，并插入具有随机生成的位置值的其他div(上、左)。
我想要一个不使元素重叠的算法。我可以将位置设置为相对位置，但是元素会溢出出容器。
。
for (var i = 0 ; i < 20 ; i++)
{
var elem = $(document.createElement('div'));
elem.attr('class', 'child').
css
({
'top': Math.floor(Math.random()*((height-50)-30+
浏览 3提问于2014-03-27得票数 0
3回答
我一直在玩Flexbox，试着做一个粘性的页脚，但有一些原因，我的一个div是重叠的页脚？当我拖动窗口到更大的显示器时，页脚是完美的。我做错什么了？
另外，我更喜欢使用这个方法，而不是其他方法，比如table方法。
以下是我的Html布局：
<body>
<div class="mainContent">...</div>
<div class="footer">...</div>
</body>
在我的mainContent div中，我有我的网站的完整顶部部分，包括标题。
浏览 4提问于2014-04-12得票数 1
回答已采纳
1回答
我很难理解为什么粘性div不能推送其他粘性div。我很确定我见过它是这样工作的，但我不能理解。 我希望标题1推入标题2，而不是重叠在它上面。HTML <div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</
浏览 11提问于2020-12-04得票数 1
回答已采纳
我们在我工作的地方使用亚特兰西安的汇合处。UI显示名为header的div、称为拆分器的区域( div )和另一个称为脚注的div。无论您如何调整窗口的大小，页脚总是出现在页面底部，而拆分器总是大小来填充页眉和页脚之间的空间(即使拆分器的内容没有填充空格)。
检查页脚的css，它似乎没有使用典型的粘性页脚css技巧(位置:绝对；底部:0)。我试图弄清楚他们是在使用javascript来调整大小，还是在使用某种花哨的css。
谢谢你能提供的一切帮助。
浏览 4提问于2013-11-09得票数 0
回答已采纳
使用下面的CSS，我设法在我的wordpress网站上创建了一个粘性菜单。不幸的是，我的菜单现在与所有页面上的标题重叠。如何将菜单和内容分开，使所有内容都从菜单下开始？
#header-grid {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
<div class=header-grid&
浏览 0提问于2020-04-05得票数 0
3回答
我试图将div放置在彼此的旁边，其中div的作用就像一个粘性页脚，使用的位置是:绝对和底部:0。
HTML：(note that I could have many of these with different id but the same class)
<div id="s6234" class="sticky">
<div id="s_content">
Hello
</div>
</div>
<div id="s7243" class=&#
浏览 0提问于2011-12-23得票数 2
回答已采纳
我不使用“手风琴”这些可折叠的元素，并希望避免它，因为它将需要很多时间来转换它，我认为。我有两个可扩展/可折叠的元素，当我打开底部--大多数元素时，它与页脚重叠。我已经想出了如何使它成为一个粘性页脚，所以它现在位于页面底部，但是如果内容由于元素的扩展而增加，我似乎不能再往下推它了(如果页脚不是粘性的，它就工作得很好，但是页脚位于页面的中间，这是不需要的)。
我在这里看过几个关于手风琴，重叠的脚的线索，但是我从来没有见过他们中的任何一个想出一个解决方案。有人有什么建议吗？
<body>
<div id="wrapper">
<div id=
浏览 2提问于2017-11-06得票数 0
问题
我在另一个容器里有个容器。外部容器上的规则display: inline-block;是给定的。我希望内部容器的内容在外部容器的内容开始的地方结束。我尝试使用left: -100%;，但很自然，它只将内容移动到外部容器很宽的地方。用例:内部元素将是显示在左侧对齐的悬停上的工具提示。
如何在不使用JavaScript的情况下使两个元素彼此对齐而不相互重叠？
<div>
Short content
<div>This is very long test sentence.</div>
</div>
CSS
div {
浏览 3提问于2014-03-03得票数 5
回答已采纳
4回答
我的网站有一个粘性的导航，但是它不能在移动设备上工作.
我如何在移动设备上使其成为粘性的，或者如何防止成为粘性(当然，在保持导航的同时)？
我到处寻找答案，但没有找到一个有效的(也没有禁用我的导航：)您的帮助是非常感谢的！
这是我的index.html头的一部分：
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/960.css" rel="stylesheet"
浏览 0提问于2012-09-04得票数 8
回答已采纳
2回答
在过去的几天里，我一直在学习各种教程，当我的页面垂直滚动时，我遇到了(粘性的)页眉重叠的问题。
它出现在这个的所有页面上。
HTML >
<header>
<div id="nav">
<ul>
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="collection.html" title="Coll
浏览 5提问于2014-10-03得票数 3
回答已采纳
5回答
我正在尝试使用javascript和css实现一个HTML表，它可以同时具有一个粘性列和一个粘性头。
基本上，我试图确保标题和列的粘性，只要滚动位置发生变化，就将它们翻译到正确的位置。
此技术工作良好，当我水平滚动时，粘性列在固定位置正确显示，但当我开始垂直滚动时，粘性列单元格重叠并隐藏它们。
我尝试使用z索引，以确保头始终位于行的顶部，但由于某种原因，它不起作用。
如果有人遇到过这个问题，并可以分享一个方法来解决它，那将是非常感谢的。
提前谢谢。
HTML：
<table class="tablesorter">
<thead class="
浏览 1提问于2019-06-15得票数 1
回答已采纳
我的页面有主要内容，一个粘性的页脚和一个绝对定位的右侧面板。我通常从不使用绝对定位，但在这种情况下，当浏览器窗口很薄时，我需要面板与主要内容重叠。目前，它看起来是正确的，直到我将我的窗口垂直收缩得太远。当内容继续位于分页符下方时，绝对定位的div不再与页脚相接。如何确保绝对位置的div总是足够长，以便与页脚相接，这样就没有间隙？
下面是HTML：
<body>
<div id="abs"></div>
<div class="wrapper">
<p>Website co
浏览 0提问于2013-01-11得票数 2
回答已采纳
我有一个要求，我们有页眉，中段和页脚。
页眉和页脚的高度可以或多或少取决于不同的屏幕大小和内容。
页脚将是粘性的，如果页面不包含滚动，则在屏幕的末尾，如果小屏幕发生滚动，则页脚不应与中间内容重叠。典型的贴纸页脚行为。
中间部分包含两列。每一列内容应该垂直中心对齐。
请参考下面的截图
注:我可以使用普通的粘性页脚和CALC调整高度的主要内容，但它不会是动态的。我不想使用javascript来完成DOMContentLoaded和窗口大小调整的所有数学运算。
浏览 1提问于2019-02-19得票数 1
回答已采纳
我想减小页脚的大小(高度)，同时保持它在页面底部的粘性。
HTML：
<footer class="page-footer grey lighten-2">
<div class="footer">
<div class="row">
<p id="updatedText" style="color:black"></p>
</div>
</div>
</
浏览 0提问于2018-04-12得票数 1
1回答
我有一个页面，它有一个粘性页脚，使用这个方法：
页面是通过Javascript动态创建的，除了IE6 (不幸的是，我必须支持这个愚蠢的浏览器)，所有的浏览器都可以完美地使用我的粘性页脚。页脚移动到窗口底部并停留在那里(页面延伸到超出窗口大小的位置)，因此当您滚动时，页脚保持在中心位置。
下面是我的粘性页脚的相关html代码：
<div class="container">
<div class="header">...</div>
<div class="navigation">...<
浏览 2提问于2012-10-01得票数 0
2回答
我已经构建了一个粘性标题，当您滚动经过导航区域时，它会出现，除了当我调整窗口大小时，粘性标题不会自动调整，直到我重新加载页面，即使宽度为100%并且位置是固定的。其他每个div都会自动调整，但这个不会(可能是因为javascript从固定的头文件中克隆了它？)。所以，我不知道如何修复的错误是当我改变窗口大小而不需要重新加载时，让.floatingHeader自动调整。关于如何修复这个小小的美学错误，有什么想法吗？
我的HTML：
<div class="persist-area">
<div class="top">
&
浏览 3提问于2014-01-12得票数 0
2回答
我有一个包含一些数据的表，我希望标题是粘性的。
这张桌子是这样的：
<div class='table' id='table'>
<div class='header row'> <!-- remove row class, it works, but is ugly -->
<div class='cell'>Col A</div><div class='cell'>Col B</div>
</div>
浏览 1提问于2019-03-23得票数 4
回答已采纳
2回答
我想要一个页的粘性页脚，它的滚动条不重叠的标题，只有身体。就像我在做的一样。但现在我想要的内容(虚线框)有100%的身体高度。
html
<div class="navbar navbar-inverse navbar-fixed-top"></div>
<div class="container">
<div class="content-container">
<div class="my_content">Full height ??</di
浏览 2提问于2015-03-11得票数 10
回答已采纳
1回答
我正在玩的颜色方案使用引导和调整粘性页脚和肚脐的颜色有困难。我正在做我的CSS文件背景颜色调整，但似乎没有调整粘性页脚。知道为什么我的CSS没有覆盖我的粘性页脚的颜色吗？
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap basic website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.
浏览 4提问于2014-04-25得票数 2
回答已采纳
1回答
滚动元素然后固定
、、、
我似乎想不出办法来做这个。我已经找到了几个例子，当一个元素超过某个点而不是多个项目重叠时，就会得到一个固定的元素。
下面是我想要的网站：
$(document).scroll(function(){
el = $(".wrapper");
wrapperOffset = el.offset().top;
scrollPosition = $(window).scrollTop();
if (wrapperOffset < scrollPosition){
el.css("position", "fixed");
el.cs
浏览 3提问于2015-06-03得票数 0
回答已采纳
我在我的网站上放了一个粘性的导航栏，这是我从bootstrap上拿来的，它工作得很好。包括在导航栏，我想要一个图像，应该看起来比导航栏更大/更高的尺寸。当您打开页面时，此图像应以全尺寸显示。当您滚动时，图像和导航栏应该一起移动到屏幕的顶部。因此，图像的重叠部分应该消失，只有它的其余部分应该像导航栏一样保持可见的粘性。 我是CSS的新手，所以我尝试了一些我在这个论坛和其他论坛上找到的随机的东西，但到目前为止都不起作用。 <html>
<head>
<link rel="stylesheet" href="https://maxc
浏览 12提问于2019-09-17得票数 0
1回答
目前正在使用HTML、CSS、Django和Javascript制作我的第一个网页:) 我的问题是，我已经在我的主要内容中添加了一些图像来测试所有内容(想要添加一个粘性导航)，但主要内容不知何故与我的导航重叠，我无法再点击导航本身的链接。 Inspector where we can see clearly the overlap. HTML： {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport&
浏览 27提问于2021-08-21得票数 1
回答已采纳
2回答
我想在一个包含div (# .inner)的容器中构建一种div(带有类容器)的“堆栈”，其中每个内部都被推到容器中尽可能远的地方，而不会与另一个内部重叠。我已经包含了分别使用一个和三个内部节点的示例：
我知道我可以通过设置...得到左边的结果。
#container { position: relative; }
.inner {
position: absolute;
bottom: 0;
}
...but此解决方案不会扩展到右侧的示例-相反，它会导致所有内部节点相互重叠。对于任意数量的内部人员，是否有什么好方法可以仅通过CSS就能完成我想要的东西？我知道我可以用一些
浏览 2提问于2014-05-30得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
