css里面的position:fixed在iframe里面无效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css里面的position:fixed在iframe里面无效相关的知识，希望对你有一定的参考价值。
我在页面里面嵌套了一个iframe，iframe里面有一个div我想实现这个div在滚动条滚动时div的位置保持不变，把div放到页面里面就可以，但是嵌套到iframe里面就不行，还是这个思路，有没有什么方法修改一下就可以实现这个效果，不要说用其他的办法
参考技术A position:把iframe里的这个属性，设置成继承父属性 参考技术B 可以的，iframe里面有个嵌套页面背景透明的效果，把图片放在iframe里面就可以了透明方法：
在transparentBody.htm文件的<body>标签中，我已经加入了style="background-color=transparent" 通过以下四种IFRAME的写法我想大概你对iframe背景透明效果的实现方法应该会有个清晰的了解：
<IFRAME ID="Frame1" SRC="transparentBody.htm" allowTransparency="true"></IFRAME>
<IFRAME ID="Frame2" SRC="transparentBody.htm" allowTransparency="true" STYLE="background-color: green"> </IFRAME>
<IFRAME ID="Frame3" SRC="transparentBody.htm"></IFRAME>
<IFRAME ID="Frame4" SRC="transparentBody.htm" STYLE="background-color: green"> </IFRAME>本回答被提问者和网友采纳 参考技术C iframe引用的是一张网页，这张网页的样式是独立的。
比如当前网页是 a.html； iframe引用的是b.html
因为b.html是一个独立的网页，所以它不受a.html中样式的影响。
你把固定定位的样式放在b.html中就可以了追问
样式我没有写在a和b上面是外部引入的，可以确定还样式没关系，问题是在a.frame里面鼠标滑动的时候这个div可以保持位置不变，但是当把a的滚动条隐藏之后在页面滚动的话，这个div的位置就变了，也就是说fixed只是在frame里面起作用，不知道我说明白了没有
z-index 和 position fixed 如何在 css 中协同工作
【中文标题】z-index 和 position fixed 如何在 css 中协同工作【英文标题】：How does z-index and position fixed work together in css 【发布时间】：2013-04-28 01:06:24 【问题描述】：body
height: 3000px;
.fixed
position: fixed;
width: 100%;
height: 60px;
top: 0;
left: 0;
background: #f4f4f4;
.fixed h3
position: relative;
z-index: 300;
color: #fff;
.overlay
background-color: #000;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .5;
position: fixed;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
<div class="overlay"></div>
<div class="fixed">
<center>
<h3>
Only this thing should be brought on top of overlay..
</h3>
</center>
</div>现在我如何将 h3 放置在覆盖层顶部的 .fixed div 中。请与 z-index 一起发布一些关于 fixed 的阅读。
http://jsfiddle.net/CvMLw/4/ 检查上面的jsfiddle，那么我如何将h3放在覆盖层之上..
【问题讨论】：
z-index not working with fixed positioning的可能重复 请告诉我您没有使用 br 标签进行页面布局。如果你使用两个以上，那你就错了。 您将absolute 和fixed 两个位置组合为同一元素.overlay
@fotanus - 我在地上打滚！
@blachawk 我无法专注于这个问题
【参考方案1】：
改变你的
position:fixed;
到
position:absolute;
在.fixed 上，然后就可以了。
【讨论】：
【参考方案2】：如果.fixed 元素充当其任何子元素的持有者，则不能这样做。
这意味着，例如，如果您将h3 设置为底部的绝对位置，它将转到其父元素的底部。
z-index 的工作方式相同。它的值将由父级继承。由于z-index 默认值为0，您的.fixed 元素的z-index 值为0，而您的h3首先有0，然后是300 .
【讨论】：
【参考方案3】：您在覆盖层下方的固定div 内的元素上设置z-index。
换句话说，隐藏z-index 值的叠加层是301。
你看，它就像乐高积木。 .fixed 位于底部，其 z-index 为 0。
然后在.fixed 你的h3 是一个300 个块。
例如，如果我们在h3 标记下方添加另一个div，其中z-index 为150，则“方块塔”将低于h3，因此h3 将位于顶部.
然后还有另一个div(.overlay) 在与.fixed 相同的DOM 级别上，z-index 比.fixed 更高。该块将放置在h3 的 300 个块之上。
例如：
<==============================> <- the .overlay (z-index 1)
<=>
<=>
<=>
<=>
<=> <=> <- Elements inside .fixed (random z-index)
<=> <=>
<=> <=>
<=> <=>
<=> <=>
<==============================> <- the .fixed (z-index 0)
要将 h3 设置在顶部，请将其放在与叠加层相同的 lvl 上或设置更高的 .fixed z-index。
【讨论】：
以上是关于css里面的position:fixed在iframe里面无效的主要内容，如果未能解决你的问题，请参考以下文章
css position fixed 在移动端上为啥会 晃来晃去
css: flex布局和position:absolute/fixed冲突解决