使用 CSS 和 HTML5，我什么時候應該使用靜態、絕對、固定或相對定位？
[英]With CSS and HTML5, when should I use static, absolute, fixed, or relative positioning?
問題描述
我正在嘗試為我的網頁建立布局。 我專注於一個導航欄，頂部有 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 的開始。
1 個解決方案
解決方案1
1 2015-11-06 04:24:12
您的問題沒有確切答案。 您不提供HTML布局，也不知道您要完成什么設計。
但是這里是一個指南：
static =正常定位，即事物停留在頁面的正常流程中。
absolute =絕對將其放置在頁面的頂部/底部，右側/左側，通常寬度和高度。 它將相對於整個頁面或最接近的“位置：相對”父對象定位。
固定=類似於絕對，不同之處在於它相對於整個窗口是固定的，並且在滾動時不會移動
relative =與static類似，但會創建自己的定位上下文...表示其中的任何“位置：絕對”都將相對於它。 相對也可以相對於頁面上通常出現的位置上下左右移動
解決方案2
-1 2015-11-06 04:23:58
從CSS技巧 ：
靜態的。 這是每個頁面元素的默認設置。 不同的元素沒有不同的默認定位值，它們都以靜態開始。 靜態的含義並不多，僅表示元素將像往常一樣流入頁面。 您曾經將元素設置為position的唯一原因是：static是強制刪除一些應用於控件外部元素的位置。 這是相當罕見的，因為定位不會級聯。
相對的 。 這種定位可能是最容易混淆和誤用的位置。 它真正的意思是“相對於自身”。 如果您設置位置：相對； 在沒有其他定位屬性（頂部，左側，底部或右側）的元素上，它完全不會影響其位置，這與將其保留在位置上的效果完全相同：static; 但是，如果您確實給它其他一些定位屬性，例如top：10px ;，它將把它的位置從正常位置下移10個像素。 我相信您可以想象，基於元素的常規位置來移動元素的功能非常有用。 我發現自己經常使用這種方法來排列表單元素，而這些元素傾向於不希望按照我的方式排列。
設置位置時還會發生其他兩件事： 相對； 在您應該注意的元素上。 其一是它引入了在該元素上使用z-index的功能，這實際上不適用於靜態定位的元素。 即使您未設置z-index值，該元素現在也將出現在任何其他靜態定位的元素之上。 您不能通過在靜態定位的元素上設置更高的z-index值來對抗它。 發生的另一件事是它限制了絕對定位的子元素的范圍。 作為相對定位元素的子元素的任何元素都可以絕對定位在該塊內。 這帶來了一些強大的機會，在此我將進行討論。
絕對。 這是一種非常強大的定位類型，可讓您將任何頁面元素確切地放置在所需的位置。 您可以使用頂部，左側，底部和右側的定位屬性來設置位置。 請記住，這些值將相對於具有相對（或絕對）定位的下一個父元素。 如果沒有這樣的父級，它將默認一直返回到元素本身，這意味着它將相對於頁面本身放置。 關於絕對定位的權衡和要記住的最重要的事情是，這些元素已從頁面上的元素流中刪除。 具有這種定位類型的元素不會受到其他元素的影響，也不會影響其他元素。 每次您使用絕對定位時，都要考慮這一點。 過度使用或使用不當會限制您網站的靈活性。
固定。 這種定位很少見，但肯定有其用途。 固定位置元素相對於視口或瀏覽器窗口本身定位。 滾動窗口時，視口不會改變，因此固定位置的元素將保持在滾動頁面時的位置，從而產生一種類似於老式“框架”時代的效果。 看一下該站點（更新：死鏈接，抱歉），該站點的左側邊欄已固定。 該網站展現出固定定位的優點和缺點，因此是一個完美的例子。 好處是，它可使導航始終顯示在頁面上，並在頁面上產生有趣的效果。 不利的是，存在一些可用性問題。 在我較小的筆記本電腦上，側邊欄中的內容被切斷，我無法向下滾動以查看其余內容。 另外，如果我一直向下滾動到頁腳，它會與頁腳內容重疊，使我無法看到所有內容。 很酷的效果，可能會有用，但是需要進行徹底的測試。
在這種情況下，使用CSS中的position：absolute，position：relative，position：fixed和position：static
[英]In which situation use position:absolute, position:relative, position:fixed and position:static in css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.