Question

我一直在玩弄定位（相对和绝对），我遇到了一个奇怪的问题。

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;
}

正如您所见here，我将<p>标记应用于边距，但它会推动整个包装div，从而影响定位元素。

这是应该表现的方式还是我错过了什么？

Answer 1

在.one元素上尝试overflow: auto;。

Answer 2

Overflow:auto适用于此

<强> DEMO

原因：以下是此http://www.brunildo.org/test/OverflowR.html

的说明

Answer 3

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

元素。

Answer 4

带有Div的

class="one"有此css规则

position:relative

将所有内容都推下来。

请记住，一旦您撰写position:absolute，此absolute将引用其“容器”。如果您<{> 1}}和one 删除 相对定位，您将获得所需的视频

<强> DEMO

Answer 5

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

这是你在找什么？ http://jsfiddle.net/DYBpg/

奇怪的定位行为

5 个答案: