Question

我的身体里放着iframe。但是，我想将它的左边缘正常对齐到-100px，然后在悬停时将其移动到0px。但是，我无法做到这一点。我尝试使用CSS：

.cnetBox {
    left:-100px;
    width:200px;
    height:200px;
    opacity:.5;
    transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

    .cnetBox:hover {
        left:0px;
        width:90%;
        height:500px;
        opacity:1;
    }

然后在身体里：

<iframe src="http://www.cnet.com" height="200" width="200" class="cnetBox">
  <p>Your browser does not support iframes.</p>
</iframe>

但没有任何反应。 iframe仍然只在0px的左边缘对齐。如何将左边缘设置为-100px？感谢。

Answer 1

您只需将position: relative添加到.cnetBox。

默认情况下，iframe（与所有其他元素一样）的位置为static，因此提供任何位置值都不起作用。这篇CSS Tricks文章很好地解释了这些差异而没有过于冗长。

或者，如果出于某种原因，您需要iframe保持静态，那么将left换成margin-left，您将获得完全相同的内容。

Answer 2

为了使CSS left，top等影响元素的位置，它必须设置position。

根据HTML的结构，您需要的值为relative或absolute

请在此处查看：http://jsfiddle.net/VAqTt/

文档及相关阅读

css position - https://developer.mozilla.org/en-US/docs/CSS/position
css top - https://developer.mozilla.org/en-US/docs/CSS/left
MDN上的“视觉格式化模型” - https://developer.mozilla.org/en-US/docs/CSS/Visual_formatting_model
alistapart上的“CSS定位101”* - http://alistapart.com/article/css-positioning-101

Answer 3

将position:absolute;添加到您的.cnetBox CSS

小提琴：http://jsfiddle.net/RYh7U/101/

将iFrame的左边缘对齐到-100？

3 个答案: