对于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=事物在页面正常流动中的正常位置。

绝对=您将其放置在页面的顶部/底部、右侧/左侧,通常具有宽度和高度。它将相对于整个页面或最接近的"position:relative"父级进行定位。

fixed=类似于absolute,只是它相对于整个窗口是固定的,并且在滚动时不会移动

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

最新更新