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

に追加する必要がありposition: relativeます.cnetBox。

iframe（他のすべての要素と同様に）staticデフォルトの位置にあるため、位置の値を指定しても効果はありません。このCSSTricksの記事は、冗長になりすぎずに違いを説明するのに役立ちます。

または、何らかの理由でiframe静的な状態を維持する必要がある場合は、交換leftするmargin-leftとほぼ同じことが達成されます。

score 2 · Accepted Answer

CSSleftなどtopが要素の位置に影響を与えるには、positionセットが必要です。

relativeHTMLの構造に応じて、またはの値が必要になります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 に答える

html - iFrameの左端を-100に揃えますか？

3 に答える 3

Related

Reference