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

将 padding-top 应用到包含的 div 而不是 margin-top 到

元素。

于 2012-11-21T11:21:21.373 回答
0

Div有class="one"这个 CSS 规则

position:relative

将其所有内容向下推。

请记住，一旦您编写了position:absolute，这absolute将引用它的“容器”。如果您从中删除相对定位，您将获得所需one的watone p

演示

于 2012-11-21T11:28:32.087 回答
0

绝对位置应用于父相对。如果您希望绝对定位的 div 位于页面顶部，请不要使用相对 atone或one p。

这是你要找的吗？ http://jsfiddle.net/DYBpg/

于 2012-11-21T11:30:50.710 回答