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

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 =正常定位，即事物停留在页面的正常流程中。

absolute =绝对将其放置在页面的顶部/底部，右侧/左侧，通常宽度和高度。 它将相对于整个页面或最接近的“位置：相对”父对象定位。

固定=类似于绝对，不同之处在于它相对于整个窗口是固定的，并且在滚动时不会移动

relative =与static类似，但会创建自己的定位上下文...表示其中的任何“位置：绝对”都将相对于它。 相对也可以相对于页面上通常出现的位置上下左右移动

Answer 2

从CSS技巧：

静态的。 这是每个页面元素的默认设置。 不同的元素没有不同的默认定位值，它们都以静态开始。 静态的含义并不多，仅表示元素将像往常一样流入页面。 您曾经将元素设置为position的唯一原因是：static是强制删除一些应用于控件外部元素的位置。 这是相当罕见的，因为定位不会级联。

相对的 。 这种定位可能是最容易混淆和误用的位置。 它真正的意思是“相对于自身”。 如果您设置位置：相对； 在没有其他定位属性（顶部，左侧，底部或右侧）的元素上，它完全不会影响其位置，这与将其保留在位置上的效果完全相同：static; 但是，如果您确实给它其他一些定位属性，例如top：10px ;，它将把它的位置从正常位置下移10个像素。 我相信您可以想象，基于元素的常规位置来移动元素的功能非常有用。 我发现自己经常使用这种方法来排列表单元素，而这些元素倾向于不希望按照我的方式排列。

设置位置时还会发生其他两件事： 相对； 在您应该注意的元素上。 其一是它引入了在该元素上使用z-index的功能，这实际上不适用于静态定位的元素。 即使您未设置z-index值，该元素现在也将出现在任何其他静态定位的元素之上。 您不能通过在静态定位的元素上设置更高的z-index值来对抗它。 发生的另一件事是它限制了绝对定位的子元素的范围。 作为相对定位元素的子元素的任何元素都可以绝对定位在该块内。 这带来了一些强大的机会，在此我将进行讨论。

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

固定。 这种定位很少见，但肯定有其用途。 固定位置元素相对于视口或浏览器窗口本身定位。 滚动窗口时，视口不会改变，因此固定位置的元素将保持在滚动页面时的位置，从而产生一种类似于老式“框架”时代的效果。 看一下该站点（更新：死链接，抱歉），该站点的左侧边栏已固定。 该网站展现出固定定位的优点和缺点，因此是一个完美的例子。 好处是，它可使导航始终显示在页面上，并在页面上产生有趣的效果。 不利的是，存在一些可用性问题。 在我较小的笔记本电脑上，侧边栏中的内容被切断，我无法向下滚动以查看其余内容。 另外，如果我一直向下滚动到页脚，它会与页脚内容重叠，使我无法看到所有内容。 很酷的效果，可能会有用，但是需要进行彻底的测试。

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

问题描述

1 个解决方案

解决方案1
1 2015-11-06 04:24:12

解决方案2
-1 2015-11-06 04:23:58

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

问题描述

1 个解决方案

解决方案1 1 2015-11-06 04:24:12

解决方案2 -1 2015-11-06 04:23:58

解决方案1
1 2015-11-06 04:24:12

解决方案2
-1 2015-11-06 04:23:58