0

私は持っている：

.event {
    float:left;
    position:relative;
    top: 50px;
    width: 100%;
    height: 100px;
    background-color: #FFFFFF;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

firefox と safari で私の好みに合わせて動作します。主に別の要素に対してフロートしますが、それに対してオフセットします。フロートに使用できることはわかっていますmargin-top:50pxが、何らかの理由で top の方がセマンティックに意味があります。

4

6 に答える 6

3

まず、可能であれば、フロートと相対/絶対配置を組み合わせないようにします。複雑さが増し、クロスブラウザーの問題が発生する可能性が高まるためです。

position: relative次に、 floatの有効な使用例があります。最も明白なのは、相対 + 絶対配置を使用することです(フロートの内部要素がコンテナーに対して絶対配置されます)。

それはあなたがやっていることではないようですので、 を使用することをお勧めしmargin-topます。そうすれば、きっと頭痛も減るはずです。そうは言っても、top: 50ここであなたが期待することをするかどうかさえわかりません。

于 2009-10-20T06:36:03.840 に答える
1

フローティング div には position:absolute を使用する要素が含まれているため、float:left AND position:relative が必要になる場合があることがわかりました。

「position:relative」は、子要素が独自の div 内に正しく配置されるようにします。親に「相対」がなければ、外部に配置されます。

于 2013-09-12T08:53:03.067 に答える
0

top を使用する場合、含まれる要素も (相対または絶対) 配置する必要があります。そうしないと、必要な結果が常に得られるとは限りません。それはあなたの質問に答えていますか？

于 2009-10-20T06:35:47.540 に答える
0

それは何も悪いことではありません。float要素がレンダリングされるフローを参照します。positionこの要素がオフセットされるアンカー要素を参照します。それらが相互に排他的である場合、W3C 勧告は可能なオプションを 1 つのプロパティにまとめていたでしょう。

于 2009-10-20T06:36:48.583 に答える
0

その位置はまだ同じ場所にあるため、悪い考えですが、元の位置からオフセットしているため、これに遭遇します

margin:50px 0 0;この場合は、後で来る要素を適切にシフトするため、使用する必要があります。どちらかを明示的に設定する必要はありませんwidth:100%。

于 2009-10-20T06:37:01.720 に答える
0

あなたのやり方に「間違い」はありません。多くの場合、これが「正しい」方法と考えられます。

position: relative; top: 50px;そうは言っても、以上または以下のセマンティックは何もないことを知っておく必要がありますmargin-top: 50px;。どちらの方法でも快適に操作できるようになるはずです。この場合、一般的に最初のアプローチとしてマージンを使用することをお勧めします。

相対的な配置は、要素が互いにどのように流れるかを混乱させます。後で別の要素を左にフロートさせて要素の下に積み重ねたいと判断した場合、それが新しい要素の上部 50px に重なっている.eventことがわかります。.event相対的な配置で要素をオフセットすると、そのボックスは配置なしでレンダリングされたレイアウトに残るため、近くの要素と奇妙に相互作用します。

于 2009-10-20T07:13:39.177 に答える