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

Answer 1

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

您的 iframe(与所有其他元素一样)默认将其定位为 static，因此提供任何位置值都将无效。这CSS Tricks这篇文章很好地解释了差异，但又不太冗长。

或者，如果出于某种原因您需要 iframe 保持静态，则将 left 换成 margin-left 即可实现几乎是一回事。