css：绝对位置不利于右值和底部值？答案

【问题标题】：css: absolute position doesn't favour right and bottom value?css：绝对位置不利于右值和底部值？
【发布时间】：2012-08-19 23:00:37
【问题描述】：

我想绝对定位一个 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”。

【问题讨论】：

标签： css position positioning css-position absolutelayout

【解决方案1】：

不知道为什么，但是，在玩了一会儿之后，IFrame 似乎出于某种原因不喜欢这种定位风格。

我可以做的一个解决方案是将它包含在一个 div 中，并将 div 设置为您想要的大小/位置。

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

此外，尽管为 500x500 像素，主体背景颜色将继续填满页面中的所有空间，但 div 的大小仍然正确。（调整身体大小以检查...）

【讨论】：

我看到了与 IFRAME 相同的问题，不想采用自动宽度/高度。我能够通过额外的包装DIV 来解决这个问题，之后IFRAME 能够使用width: 100%; height: 100%;。看到这个fiddle。

【解决方案2】：

~~你不能同时设置 left 和 right 或 top 和 bottom 属性。~~ edit：事实证明你可以设置绝对定位，正如我刚刚从这篇文章：http://www.alistapart.com/articles/conflictingabsolutepositions（全部归功于@thirdender 的提示！）。不过，iframe 的行为似乎有所不同。

你可以像这样实现你所追求的：http://jsfiddle.net/7fTEF/2/

请注意，不需要绝对定位。我还使用了 css3 属性 box-sizing。您必须添加浏览器特定的前缀，如此处所述http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

请注意，此解决方案不适用于旧浏览器，您最终会看到滚动条。如果你想让它完全兼容浏览器，我认为你将不得不求助于一些 js，但是你会遇到禁用此功能的人的问题。你也可以尝试两者的结合。这完全取决于您的受众以及您如何找到它...

【讨论】：

奇怪的是它不能同时设置左右，上下，如果我将上，左，右，下设置为'0'就可以了。但我喜欢你的回答。
这是 CSS 规范的一部分，您可以在绝对定位的元素上同时设置所有四个 top、right、bottom 和 left 属性，只要您不指定固定的宽度或高度。元素的宽度或高度是自动计算的。此外，该技术非常可靠，适用于从 IE7 开始的所有浏览器。见Conflicting Absolute Positions、W3C Spec、fiddle。
@thirdender 这对我来说是新的。你的小提琴给我留下了深刻的印象，尽管你让我对你使用的非标准 css 有点困惑（看起来与我习惯的不太相似，但我猜应该不会真正影响结果）。您可以从原始问题更新小提琴以达到预期的结果吗？我很好奇，渴望学习……
@PeterVR，是的，jsFiddle 允许您使用SCSS 而不是 CSS。我尝试用IFRAME 做同样的技巧，但显然当使用width: auto; 时它们的行为与DIV 或SPAN 元素不同。它们的行为更像TABLE 元素，需要特定的宽度，否则它们会根据内容的宽度进行调整（参见test fiddle）。我不得不在我想要的位置放置一个额外的DIV，然后将DIV 中的IFRAME 设置为width: 100%; height: 100%;。 Final output.
@thirdender 你应该发布这个作为答案！你的比我的好得多（我自己不是盒子大小的忠实粉丝），无论如何我们都应该停止关心 -IE7。你会得到我的投票！将纠正我的答案并感谢课程和有趣的阅读！

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：