定位 header 而不向下移动页面的其余部分

Question

我是 CSS 的新手，我正在尝试将我的 header 字面上的位置向下移动几个像素，而不向下移动页面的其余部分。

我试过 padding-bottom 但它向下移动了页面，尝试了底部边距，但它什么也没做。试过浮动，对齐。由于某种原因，行高没有影响。唯一有轻微影响的是 position: absolute; 和 line-height 与它一起工作，但是它把它移得太低了一点，现在我只需要它高几个像素。 line-height 不会提高超过 2px，我也尝试在以上所有内容中使用 %。

有没有人能解决我使用 position:absolute 之前的问题以及我现在因 line-height 限制而遇到的问题。

h2 {
    padding-left: 45%;
    position: absolute;
    line-height: 2px;
}

Answer 1

当您使用position: absolute时，增加保证金不会影响头寸。

尝试使用 top: 2px 它会将元素定位在距顶部 2 像素的位置。另外 line-height: 2px 看起来很老套，除非字体大小是 1px 我不会使用它。

h2 {
    padding-left: 45%;
    position: absolute;
    top: 2px;
}

关于职位属性的更多信息：http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

您可能会发现 position: absolute 会给您带来一些问题。这是因为您将它从常规流程中取出，所以它不会再保留它的位置。如果您运行遇到问题，请尝试 position: relative 。这应该让它保持在流程中，并结合 top: 2px 应该将它向下移动一点。

您还可以尝试其他一些选项，包括 margin-top: 2px 或 padding-top:2px（使用 position:relative 时）。 padding-bottom 不起作用的原因是因为您在其下方而不是其上方添加了一些额外的 "padding"/space 。

这有意义吗？有问题请提问

定位 header 而不向下移动页面的其余部分

Positioning a header without moving rest of page down

html

css

positioning