相关疑难解决方法(0)
CSS:'position:sticky'在定义'height'时不起作用
我正在构建一个登录页面,用户首先看到一个主要区域,其下方有一个页脚.向下滚动显示页脚是一个粘性标题,我的目标是使用纯CSS来实现这一点.为了获得主要内容和页脚的全屏外观,我将height属性设置为两个不同的值:92%和8%(使用vh也不起作用).无论height我在我的CSS中指定(不同的单位和所有),我的页脚div都没有坚持.一旦我删除该height属性它就按预期工作.
这是删除属性之前我的页面的屏幕截图height:
正如你所看到的,它并没有坚持:
删除height属性值后,它确实粘贴:
这是我的HTML:
html,
body {
height: 100%;
margin: 0;
}
#main {
height: 92%;
}
#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
#landingContent {
width: 20vw;
}
#footerNav {
height: 8%;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
}这是我(可能)相关的CSS:
<div id="main">
<div id="landing">
<div id="landingContent">
<h1 class="logo">Logo</h1> …推荐指数
解决办法
查看次数
如果您将“ bottom：0”指定为“ sticky”，为什么它会做一些与规范不同的事情？
当我阅读有关MDN position属性的文章时，这是一个问题。我认为此处sticky描述的行为与实际行为之间存在明显的差异。
根据MDN，固定位置元素将被视为相对位置元素，直到超过指定的阈值为止；当超过阈值时，它们将被视为固定位置元素，直到达到父元素的边界为止（Link）。
粘性定位可以看作是相对定位和固定定位的混合体。粘性定位的元素将被视为相对定位，直到其超过指定的阈值为止，在该点处将其视为固定的，直到其到达其父对象的边界为止。例如...
Run Code Online (Sandbox Code Playgroud)#one { position: sticky; top: 10px; }...将相对位置为id的元素定位到视口滚动之前，以使元素距离顶部小于10个像素。超过该阈值，该元素将从顶部固定为10个像素。
因此，我创建了以下代码并确认了操作。
#one { position: sticky; top: 10px; }
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
}
.container>* {
width: 100%;
}
header {
background: #ffa;
height: 130vh;
}
main {
background: #faf;
height: 210vh;
}
footer {
background: #faa;
height: 8vh;
position: sticky;
bottom: 0;
}
.footer {
background: #aff;
height: 100vh;
}根据MDN文章，此代码“是相对放置元素，直到通过滚动视口使元素的位置离视口底部小于0px为止，并且当它离底部大于0px时成为固定的放置元素“ 我刚在想。
但是，结果是“滚动到固定位置元素，直到通过滚动视口使元素的位置从视口的下端开始小于0px为止，并且当从下视点大于0px时成为相对排列的元素结束”。 …
推荐指数
解决办法
查看次数
位置粘性未正确粘贴
在下面给出的片段中，带有位置粘性的元素不会粘在页面的末尾。
body {
margin: 0;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}<!DOCTYPE html>
<html>
<body>
<div class="sticky">I am sticky!</div>
<div style="margin-bottom:2000px;
border:2px solid black ;">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset …推荐指数
解决办法
查看次数
为什么带有position：sticky的元素不会停留在父对象的底部？
我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”
我的测试代码是：
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。
推荐指数
解决办法
查看次数
如果后跟位置绝对元素，为什么位置粘性不起作用？
下面是代码片段，如果运行它，您可以看到标题元素没有粘贴。我查看了以下问题。 “位置：粘性；” 不工作的 CSS 和 HTML 和CSS：“位置：粘性” 在许多其他人中定义了“高度”时不起作用，但它没有帮助..
这是我的代码。
<body style="margin: 0">
<div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
<div>header contents</div>
<div>header contents</div>
</div>
<div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
<div style="height: 1000px;">
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
<div>some contents</div>
<br>
</div>
</div>
</body>我还注意到，如果我从容器 div 中删除 position: absolute ，粘性开始正常工作。任何帮助将不胜感激。
推荐指数
解决办法
查看次数