css – 位置:粘不起作用

栏目: CSS · 发布时间: 5年前

内容简介:翻译自:https://stackoverflow.com/questions/45530235/positionsticky-is-not-working
我有这个 HTML

代码:

<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
<div class="navbar"></div></div>

.header的高度为150px. .navbar的高度为20px.当用户滚动时,我希望.navbar坚持在顶部.所以我去了CSS并设置了位置:sticky和top:0.但这没效果.我最初认为firefox不支持position:sticky,但事实并非如此,因为我能够看到它的工作演示.我用Google搜索但没有发现任何帮助.谁知道为什么这不起作用?

如果您将导航栏移动到标题之外,它可以正常工作.见下文.因此,根据 MDN

The element is positioned according to the normal flow of the document, and then offset relative to its flow root and containing block based on the values of top, right, bottom, and left.

对于包含块:

The containing block is the ancestor to which the element is relatively positioned

因此,当我没有误解时,只要在视口外滚动导航栏,它就会定位在标题内的偏移0处(显然,这意味着,您再也看不到它了).

.navbar {
  background: hotpink;
  width: 100%;
  height: 50px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.header {
  height: 150px;
  background: grey;
}

body {
  height: 800px;
  position: relative;
}
<div class="header">
<div class="desc">Description</div>
<div class="logo"><img src=""/></div>
</div>

<div class="navbar"></div>

翻译自:https://stackoverflow.com/questions/45530235/positionsticky-is-not-working


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

赢在众筹

赢在众筹

杨东、黄超达、刘思宇 / 中国经济出版社 / 2015-1-1 / 48.00

第一本股权众筹体系化图书。李克强总理要求“开展股票众筹融资试点”。人民大学杨东教授,天使街黄超达、刘思宇两位老总倾情创作。阿里巴巴、平安集团、京东等多家机构联袂推荐一起来看看 《赢在众筹》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具