Question

我正在尝试为我的网页建立布局。我专注于一个导航栏，顶部有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的开头。

Answer 1

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

但这是一个指南：

static =正常定位，其中的东西保持在页面的正常流程中。

绝对=您将页面的上/下，左/右定位在正常的宽度和高度上。并且它将相对于整个页面或最接近的位置定位：相对＆＃34;父节点。

fixed =类似于绝对值，但它相对于整个窗口是固定的，滚动时不会移动

relative =类似于static，但它创建了自己的定位上下文......意思是任何东西＆＃34; position：absolute＆＃34;它内部将相对于它。相对也可以相对于页面上正常显示的位置向上/向下，向左/向右移动

Answer 2

来自css-tricks：

静态。这是每个页面元素的默认值。不同的元素没有不同的定位默认值，它们都是静态的。静态意义不大，只是意味着元素将像往常一样流入页面。将元素设置为position的唯一原因：static是强制删除一些应用于控件之外的元素的定位。这是相当罕见的，因为定位不会级联。

<强>相对即可。这种类型的定位可能是最令人困惑和误用的。它的真正含义是相对于它自己＆＃34;。如果设置position：relative;在一个元素上但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的位置，它将完全像您将它保留为position：static;但是如果你给它一些其他的定位属性，比如top：10px;，它会将它的位置从它正常的位置向下移10个像素。我相信你可以想象，根据它的常规位置移动元素的能力非常有用。我发现自己使用它来多次排列表单元素，这些元素倾向于不想按照我希望的方式排列。

当您在应该注意的元素上设置位置时，还会发生另外两件事： relative; 。一个是它引入了在该元素上使用z-index的能力，这对于静态定位的元素并不起作用。即使您没有设置z-index值，此元素现在也会显示在任何其他静态定位元素的顶部。您可以通过在静态定位元素上设置更高的z-index值来对抗它。另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。这带来了一些我在这里谈到的强大机会。

绝对。这是一种非常强大的定位类型，允许您将任何页面元素准确地放置在您想要的位置。您可以使用顶部，左下角和右侧的定位属性来设置位置。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。   关于绝对定位的权衡和最重要的事情是，这些元素将从页面上的元素流中删除。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。

已修复。此类定位相当罕见，但肯定有其用途。固定位置元素相对于视口或浏览器窗口本身定位。当窗口滚动时，视口不会改变，因此固定定位元素将保持在页面滚动时的位置，创建有点像旧学校的效果＃34;帧＆＃34;天。看看这个站点（更新：死链接，对不起），左侧边栏是固定的。这个网站是一个完美的例子，因为它展示了固定定位的好坏特征。好处是它始终在页面上保持导航，并在页面上创建和感兴趣的效果。不好的是，存在一些可用性问题。在我的笔记本电脑上，侧边栏中的内容被切断，我无法向下滚动以查看其余内容。此外，如果我一直向下滚动到页脚，它与页脚内容重叠，不允许我看到所有这些内容。很酷的效果，可能很有用，但需要进行彻底的测试。

使用CSS和HTML5，何时应该使用静态，绝对，固定或相对定位？

2 个答案: