Question

我想绝对定位一个iframe并定义它的左，上，右，下偏移：

#x {
    position: fixed;
    left: 10px;
    top: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    height: auto;
    border: 2px solid #aaa;
    z-index: 100002;
    background: #abc;
    display:none
}

我发现左侧和顶部值被尊重，而右侧和底部值被忽略。如果我没有设置左侧和顶部值，则会正确处理右侧和底部值。检查这个小提琴：http://jsfiddle.net/7fTEF/

有什么想法吗？

注意我不想设置元素的宽度和高度，因为我希望它相对于视口，我也不想将宽度和高度设置为百分比，我只是我想保持边界偏移一个固定的值，比如说“10px”。

Answer 1

不知道为什么，但是，经过一番游戏后，似乎IFrames不喜欢那种定位方式。

我可以做的一个解决方案是将它装入div中，并将div调整到你想要的大小/位置。

http://jsfiddle.net/7fTEF/1/

此外，尽管500x500px，身体背景颜色将继续填充页面中的所有空间，但div的大小仍然是正确的。（调整身体大小来检查......）

Answer 2

您可以通过javascript找到容器大小，然后设置iframe大小。

Answer 3

~~你不能同时设置左右两个或同时设置顶部和底部属性。~~ 编辑：事实证明你实际上可以提供绝对定位，正如我刚从中学到的那样这篇文章：http://www.alistapart.com/articles/conflictingabsolutepositions（提示给@thirdender所有信用！）。 Iframe似乎表现得不同。

你可以像这样实现你的目标：http://jsfiddle.net/7fTEF/2/

请注意，不需要绝对位置。我也使用了css3属性框大小。您必须按照http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

中的说明添加浏览器特定的前缀

请注意，此解决方案无法在旧版浏览器中使用，您最终会使用滚动条。如果你想让它完全兼容浏览器，我认为yoy将不得不求助于一些js，但是那些有这种禁用的人会遇到问题。您也可以尝试两者的组合。这一切都取决于您的受众以及您如何找到导入...

Answer 4

我在这里找到了这个页面http://www.alistapart.com/articles/conflictingabsolutepositions/，它解释了几个与仅使用CSS的旧IE浏览器兼容的解决方案。否则可能需要进行一些JavaScript计算。

css：绝对位置不利于权利和最低价值？

4 个答案: