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

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？谢谢。

score 2 · Accepted Answer

为了让 CSS left、top等影响元素的位置，它必须有一个position集合。

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

在这里查看：http: //jsfiddle.net/VAqTt/

文档和相关阅读

positionMDN 上的CSS - https://developer.mozilla.org/en-US/docs/CSS/position
topMDN 上的CSS - 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

score 2 · Accepted Answer

2

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

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

于 2013-02-21T16:06:41.617 回答

score 2 · Accepted Answer

您只需要添加position: relative到您的.cnetBox.

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

或者，如果由于某种原因您需要iframe保持静态，然后换掉left，margin-left您将实现几乎相同的目标。

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

3 回答 3

Related

Reference