个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试使用 overflow:hidden 创建一个 relative 定位元素，其中包含一些 fixed 定位元素。目标是让 fixed 子元素随着父元素的移动而隐藏起来，有点像它们是带有 attachment:fixed 的 在父元素上。background-image 的一部分
根据 StackOverflow 和网络其他地方的所有帐户，这是不可能的，因为固定元素只考虑浏览器窗口而忽略其父元素。但是，无论出于何种原因，它实际上仅在 Chrome 中按预期工作:http://jsfiddle.net/x6avvhuf/
这是 fiddle 的样子，在 Chrome 和 IE/Firefox 中查看它以了解不同之处:
HTML
<body>
<div id = "headwrapper">
I am the relative parent element
<div class = "fixedchild">
I am a fixed child element
</div>
</div>
<div id = "content">
This is the main content portion of the page<br>
<!-- Repeat until the page scrolls -->
This is the main content portion of the page<br>
</div>
CSS
body {
background-color: yellow;
}
#headwrapper {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
z-index: -1;
background-color: black;
color: white;
text-align: center;
}
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 48;
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
有什么替代解决方案？我读到过可以使用 CSS 使 absolute 元素表现得像 fixed 元素，但到目前为止我无法做到这一点。在此先感谢您的帮助或建议! :)
最佳答案
更新
有时最好的解决方案是最简单的。根据您发布的代码，您只需在 #content 上设置一个 background-color(例如:yellow 在这种情况下匹配body) 因为你的固定元素有 z-index: -1 并且无论如何都会坐在它后面:
#content{
background: yellow;
width: 100%;
}
您可以将 #content 设置为 position:relative，这样您就可以使用 z-index 来排序这个和固定的 div(这可能更好，使用 z-index: -1 是一种 hack):
CSS
.fixedchild {
position: fixed;
width: 75%;
height: 40px;
z-index: 1; //set to 1
top: 22.5%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
#content{
background: yellow;
width: 100%;
position: relative; //add
z-index: 2; //set higher
}
(上一个答案):
免责声明:这不是 CSS 解决方案。
可能有一个 CSS 解决方案。我没有碰巧知道一个，但我知道这可以用 Jquery 很容易地完成
JS
$(window).scroll(function(){
var scrolled = $(this).scrollTop()+100; //offset starting position which I hard coded to top: 100px - you can change as needed
$(".fixedchild").css({"top": scrolled+"px"});
});
CSS
.fixedchild {
position: absolute;
width: 75%;
height: 40px;
z-index: 48;
top: 100px;
left: 50%;
margin: 0 0 0 -37.5%;
text-align: center;
color: red;
background-color: pink;
}
关于html - 溢出 : hidden, 固定子不服从的相对父，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27909261/
24
4
0
在 vertical-align:bottom 的表格单元格中，我有一个或两个 div。每个div都向右浮动。 据推测，div 不应与底部对齐，但它们确实如此(我不明白，但很好)。 但是，当我在单元格
我在 html 文件的正文中有一个绝对位置 div。我希望它服从 body 边缘。在 http://jsfiddle.net/vHApr 找到我的代码. 以下是我的代码: body{ m
我已经成功克隆了一个 git hub 存储库。该存储库的文件夹结构如下: 根存储库文件夹->iOS 所以我将我的 Xcode 4 项目文件夹移动到上面的文件夹中，因此文件夹结构如下所示:root-re
在 ggplot2 中，如何使 stat_function 使用与 geom 图层相同的 x 比例，例如 scale_x_log10？ 为了说明这个问题，考虑这个例子: x <- rexp(100)
我在另一个 div 中有一个 div。 #outer 和#inner。 #outer 具有 flex 的边框和白色背景。 #inner 没有 flex 的边框和绿色背景。 #inner 超出了 #ou
我试图找到最大的 1 = b 迭代解决这个问题很简单(是的，我知道你可以通过分而治之等方法获得更好的性能)，但这不是我的问题。 我想知道是否有办法直接解决这个问题，比如通过某种位运算？ 注意 1:假设
因此，设置最大日志轮换大小似乎只有在 uwsgi.ini 而不是/etc/logrotate.d/uwsgi 中设置时才有效(即使使用/etc/logrotate.d/uwsgi 文件手动测试 log
我是一名优秀的程序员,十分优秀！