3

我一直使用边距将浮动 div 移动到父 div 中的正确位置（例如标题 div 中的徽标 div）。这一直有效，但这意味着您必须使用元素的各个高度，否则它将影响布局的其余部分向下。

我今天找到了另一种方法，那就是使徽标 div 位置：相对；然后使用示例 top: 20px; 移动元素，这似乎不会影响布局。

我不想在不知道可能有其他含义的情况下适应这一点，所以任何人都可以指出上述任何一种方法的常见缺陷或可能提出更好的解决方案吗？

  // Sample HTML
  <div id='header'>
        <div id='logo'>
              LOGO GOES HERE
        </div>      
  </div>

  // Sample CSS
  #header {
        height: 100px;
  }

  // Version 1
  #logo {
        float: left;
        margin-top: 20px;
  }

  // Version 2
  #logo {
        float: left;
        position: relative;
        top: 20px;
  }
4

2 回答 2

2

来自 Mozilla 开发人员：

relative 布局所有元素，就好像该元素没有定位一样，然后调整元素的位置，而不更改布局（从而为如果没有定位的元素留下一个间隙）。position:relative 对 table-*-group、table-row、table-column、table-cell 和 table-caption 元素的影响是未定义的。

我希望这回答了你的问题。

有时它可能是正确的使用方法，有时则不是。这实际上取决于您的布局，如果您想进行响应式设计，最好留有余量。

在您的情况下，标题的高度是固定的，因此您可以使用相对高度。我认为使用保证金是一种更常见的做法。我只知道有关position: fixed移动设备的问题。

您可以在此处了解有关 CSS 和定位的更多信息。

于 2012-10-09T13:03:39.067 回答
1

在绝对位置和固定当你使用顶部或底部或右侧或左侧时，你不能使用浮动，你必须为其父使用这种样式

postion:relative;

此致

于 2012-10-09T13:11:50.653 回答