个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我无法在网站上固定菜单。当页面内容有一个带有 Bootstrap 4 ROW 类的 DIV 时，这个 DIV 会覆盖菜单。这是 html 代码:
<html>
<head>
<script type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<main class="main-container">
<h4>
Scroll page down to see the HEADER fixed on top
</h4>
<header class="main-header">HEADER</header>
<div class="main-content">
<h4>MAIN CONTENT TITLE</h4>
<div class="row"><!-- if delete this DIV, works fine -->
<div class="col">
left col
</div>
<div class="col">
right col
</div>
</div><!-- row -->
</div><!-- main-content -->
<footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>
这里是 CSS 代码:
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{ height:50px; background:#aaa; border-color:red;}
.main-content{ min-height:1000px;}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
https://jsfiddle.net/WRobynson/qhdfbjmv/10/
拜托，有人可以帮助我吗？
谢谢
最佳答案
在 main-header 中添加 z-index。
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{ height:50px; background:#aaa; border-color:red; z-index:100;}
.main-content{ min-height:1000px;}
.main-header{position:-webkit-sticky; position:sticky; top:0;}<html>
<head>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">
<h4>MAIN CONTENT TITLE</h4>
<div class="row">
<div class="col">
left col
</div>
<div class="col">
right col
</div>
</div><!-- row -->
</div><!-- main-content -->
<footer class="main-footer">FOOTER</footer>
</main>
</body>
</html>关于css position sticky 不适用于 bootstrap 4 类行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57747889/
25
4
0
我刚开始使用 html5 和 css，我对使用 css position 有点困惑。 我可以从堆栈溢出中找到这些链接， Difference between relative and absolute
我想知道是否有一种方法可以获得相对定位的元素的“绝对位置”。我想不出任何方法，但也许有人想出了一个方法...... 最佳答案 我不确定“绝对位置”是什么意思，但您可以使用 el.getBounding
基本上我的 HTML(使用 Bootstrap 类)中有一个页面，其中包含使用 thumbnail 和 caption 类展示的产品。在产品图片上方有一个 ON SELL(圆形红色标签)。我给这个红色
当我使用 BaseAdapter 的 ListView 离开屏幕时，每一行不再保持连续的位置。除了这个我不知道还能怎么解释。 如果我的 BA/LV 在屏幕上显示 4 个项目，并且我添加了一个显示每一行
此 HTML 无法在 IE8 中正确呈现。它适用于 Firefox、Opera、IE7、IE9 和 IE10。 (当然，它在 IE6 中也不起作用，因为它涉及固定位置的元素。) 实际上它在 Chrom
我正在使用Position Absolute的表单验证引擎。 我有一个特定的验证案例，希望可以为我解决。我需要能够根据另一个字段的值来使一个字段成为必需。 例如: If country.dropdow
我看过很多帖子，人们希望将相机位置调整到屏幕位置。我的问题是如何做相反的事情。 我目前想要实现的是将“门”位置设置为屏幕的百分比，此计算已准备就绪，并且我确实有最终屏幕的 X、Y (px) 位置。相机
谁能解释一下使用 position:relative、position:absolute 和 float 对正常文档流及其子项的影响的区别？ 例如当我有三个元素 A、B、C 时，其中 A 是包含 B
我有以下代码: .tabs{ position: fixed; top:110px; left:0px; width:40px; z-inde
我不知道如何表达这个问题。 所以这是一个例子。 图层上的动画滑入 View ，然后稍微弹回。 十分简单。 位置关键帧看起来像这样: 关键帧 0:(-100,200) 关键帧 10:(100,200)
我是 XSLT 的新手，我正在使用 w3schools 的“自己尝试”页面进行一些测试。我正在使用以下演示: http://www.w3schools.com/xsl/tryxslt.asp?xmlf
我试图让一个对象 1 (SKSpriteNode) 在某个高度(y 坐标)处创建另一个对象 (object2)。我已经得到了我需要的所有代码，除了我不知道如何正确编写: object1.positio
.special p { display:none; } .special:hover p { display:block; } Things
当将一个绝对定位元素放置在一个位置固定包装器中时，在一个位置相对包装器中，绝对元素位置不应该相对于相对 parent 而不是固定 parent ？ Content
我有一个 iframe，它在应用 css 后显示谷歌地图 position: relative; top: 48px; left: -233px; 但是当我向下滚动时，它刚好出现在显示 khaleej
我在一个网站上工作，有一个带有 position:relative 的父元素，它有一个带有 position:absolute 的子元素。令我感到奇怪的是，对于我提到的位置，子元素似乎仍然可以识别它们
我有一个 main 元素，我已将其设置为 position: relative。这包含两个 div，然后我在其上应用 position: absolute。然后，这会导致夹在 main 元素中间的页眉
HTML 代码由一个 div 组成，它具有两种类型的类:“隐藏”和“保留”。 Lorem ipsum dolor sit amet, consectetur adipis
我必须开发一个生成表格(有点……)的软件，并且必须提供对元素位置的完全控制。 到目前为止，我们有这样的构造: 还有一些javascript代码来放置#a , #b和 #c #co
我尝试将 z-index 设置为 body 下的某些位置为 fixed 的元素 示例如下: HTML menu content ....
我是一名优秀的程序员,十分优秀！