css - 对于 CSS 和 HTML5，我什么时候应该使用静态、绝对、固定或相对定位？

我正在尝试为我的网页建立布局。我关注的是一个导航栏，顶部有 4 个内联链接，并且现在有一个基本的文本标题，当你向下滚动时，它会向上移动。到目前为止，我有这个 CSS:

header {
 width: 75%;
 height: 150px;
 background-color: red;
}

nav {
 background-color: blue
 width: 100%;
 height: 75px
 z-index: 2;
 }

nav ul li {
  display: inline-block;
}

这是 HTML:

<!DOCTYPE html>
<html>
<head>
  <title>NYC Autumn - Mark's CSS Switcheroo</title>
  <link rel="stylesheet" type="text/css" href="stylesheet2.css">

</head>

<body>
<nav>
<ul>
 <li>Picture Library</li>
 <li>Blog</li>
 <li>Site Seeing</li>
 <li>About Us</li>
</ul>
</nav>

<header>
<h1>
 New York in the Fall
</h1>
</header>

这是我的 HTML 的开头。

最佳答案

您的问题没有确切答案。您不提供 HTML 布局，我们也不知道您要完成什么设计。

但这里有一个指南:

static = 正常定位，其中内容保持在页面的正常流动中。

absolute = 你把它放在页面的顶部/底部，右侧/左侧，宽度和高度正常。它将相对于整个页面或最近的“position:relative”父级进行定位。

fixed = 类似于absolute，只是相对于整个窗口是固定的，滚动时不移动

relative = 类似于 static，但它创建了自己的定位上下文...意味着它内部的任何“position: absolute”都将相对于它。 Relative 也可以相对于它通常出现在页面上的位置移动顶部/底部、左侧/右侧

关于css - 对于 CSS 和 HTML5，我什么时候应该使用静态、绝对、固定或相对定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33559403/