Question

考虑以下非常简单的代码：

<div id="parent">
 <div id="child">
    Test it
 </div>
</div>

和CSS：

#parent{
position:relative;
margin-left:200px;
color:#FFF;
}
#child{
position:fixed;
top:30px;  
background-color:red;
}

我认为子div不会从父div继承margin-left，因为child会破坏正常流。但是，它不仅继承了200px的保证金;而且，如果我尝试将margin-left：50px分配给子div，结果是左边距为250px !!为什么会发生这种情况，以何种方式改变它？

谢谢

的jsfiddle：http://jsfiddle.net/rCMx2/

Answer 1

原因 - 除非你指定水平定位轴（left: ...或right: ...），子元素，即使它是一个固定的定位轴，仍将水平定位，就像它没有被固定的位置。垂直轴（top: ...或bottom: ...）及其垂直位置也是如此。

它不会从初始位置移动，因为它是一个固定的定位元素。

因此，换句话说，声明position: fixed和top: ...不会更改元素的水平位置，只会更改其垂直位置。它的水平位置仍然很自然。

解决方案 - 将left: ...或right: ...添加到固定定位元素，以便“断开连接”。它从最初的水平位置开始。

Answer 2

您在父母的保证金之上添加了50px的保证金。这可能有助于您可视化正在发生的事情：

#parent{
  margin-left:200px;
  color:#FFF;
  border:2px solid #f0f;
  overflow:visible;
}

#child{
  top:30px;  
  background-color:red;
  margin:20px;
  border:2px solid #0f0;
}

试试吧。你能更容易想象现在发生了什么吗？请注意，我删除了＆＃34;位置＆＃34;属性。

为了获得更具体的结果，我需要知道您希望最终布局如何。

Answer 3

他正在担任200px div父母的职位。当div孩子被修复时，她将父亲作为参数离开流。你可以删除他父亲的div子，与他们分开。

并将div固定为左对齐：50px而不是使用margin-left：50px。

希望这会有所帮助。

以下是一个示例：http://zip.net/bjmY23

具有固定职位的孩子的保证金继承

3 个答案: