5

以下のウェブページを考えてみましょう。は<img>その親に対して絶対的に相対的に配置され、このページを Safari または Firefox で読み込むと、<img>予想どおり、 が右上に表示されます (最初の画像を参照)。ただし、境界線が から削除されると<div>(たとえば、 を設定することによってborder-width: 0)、位置自体はタグ (その兄弟)<img>に対して絶対的に相対的になります! <p>写真＃2を参照してください。どうしてこれなの？国境はどのような違いを生むべきですか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
body {
    margin: 0;
}
div {
    position: relative;
    left: 0;
    top: 0;
    border: 1px solid red;
}
img {
    position: absolute;
    right: 0;
    top: 0;
}
p {
    margin: 20px;
}
</style>

</head>
<body>
    <div>
        <img src="content/en/flag.png" />
        <p>This is a test</p>
    </div>
</body>
</html>

絶対にdivに相対的 p に対して絶対相対

4

2 に答える 2

2

画像は常に右上にあります。これはマージンの崩壊に関係しています。

背景色でやってみてください。数ピクセルdivの上部から離れていることがわかります。bodyのマージンを削除するpと、すべてがうまくいくかp、インライン要素として設定するか、それをフローティングするか、オーバーフローをauto、hiddenまたはscroll親に設定することさえできます。折りたたまれたマージンに対処するもう 1 つの方法は、コンテナー要素に境界線を追加することです。それで、あなたは本当にその国境でこれを解決していました。

しかし、イメージは常にあるべき場所にあります。

于 2013-07-21T09:32:14.097 に答える
0

本当に奇妙ですが、実際には要素がフロートではなく、p境界線があるときにdivが適切に取っているタグにマージンを使用していて、divよりもfloatプロパティを追加すると削除されたときに実装に失敗したことを説明してみましょう身長も伸びます

divに追加overflow:auto;すると問題が解決します

于 2013-07-21T02:44:10.720 に答える