0

私はポジショニング（相対および絶対）を少しいじっていましたが、奇妙な問題に遭遇しました。

HTML:

​<div class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt sem ac      lacus varius ullamcorper. Sed sed tincidunt lorem. Integer volutpat mauris eu elit condimentum vehicula. Vestibulum vitae urna id risus ornare porta. Praesent quis tortor nunc. Donec ut aliquam orci. Mauris cursus quam mauris. Aliquam iaculis, augue malesuada egestas blandit, erat lectus vestibulum magna, sed pharetra arcu orci nec ligula. Proin non sem dui. Integer viverra viverra est sit amet fermentum. Pellentesque egestas tristique eros vel interdum. Nam vel neque odio, et mollis nulla. Vestibulum fermentum augue vel justo ullamcorper molestie. Sed eget enim urna, a elementum mi. Aenean ornare viverra dictum.

 </p>
<div class="inner"></div>

</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.one{
    position: relative;   
}
.one p{
    margin-top: 60px;          
}
.inner{
  width: 100%;
  height: 50px;
  background:red;   
  position:absolute;
  top:0;
  right:0;
}​

ここでわかるように、タグにマージンを適用します<p>が、ラッピング div 全体をプッシュするため、配置された要素にも影響を与えます。

それはそれが振る舞うべき方法ですか、それとも私は何かが欠けていますか?

4

5 に答える 5

2

overflow: auto;.one 要素を試してみてください。

于 2012-11-21T11:22:53.330 に答える
1

Overflow:autoこのために動作します

デモ

理由：これがこのhttp://www.brunildo.org/test/OverflowR.htmlの説明です

于 2012-11-21T11:25:01.237 に答える
0

Divclass="one"このCSSルールを持っています

position:relative

それはすべてのコンテンツを押し下げます。

を記述するposition:absoluteと、これabsoluteはその「コンテナ」を参照することに注意してください。から相対位置を削除すると、必要なワットが得られますoneone p

デモ

于 2012-11-21T11:28:32.087 に答える
0

絶対位置は親相対に適用されます。one絶対配置の div をページの上部に配置する場合は、相対 atまたはを使用しないでくださいone p。

これはあなたが探していたものですか？ http://jsfiddle.net/DYBpg/

于 2012-11-21T11:30:50.710 に答える
0

margin-top の代わりに、含む div に padding-top を適用します。

エレメント。

于 2012-11-21T11:21:21.373 に答える