position屬性
position屬性指定用于元素的定位方法的類型（靜態(tài)，相對(duì)，固定，絕對(duì)或粘性）。 有五種不同的值：
•static
•relative
•fixed
•absolute
•sticky
然后使用top，bottom，left和right屬性定位元素。但是，除非首先設(shè)置position屬性，否則這些屬性將不起作用。根據(jù)位置值，它們的工作方式也不同。
position:static;
默認(rèn)情況下，HTML元素定位為靜態(tài)。靜態(tài)定位元素不受top，bottom，left和right屬性的影響。 元素position:static;沒(méi)有以任何特殊方式定位; 它總是根據(jù)頁(yè)面的正常流程定位：
這個(gè)<div>元素的position:static;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>一個(gè)位置為position:static; 沒(méi)有任何特殊的定位; 它是始終根據(jù)頁(yè)面的正常流程定位：</p>
<div class="static">
這個(gè)div元素的位置為：static;
</div>
</body>
</html>position:relative;
具有position:relative;相對(duì)于其正常位置定位的元素。設(shè)置相對(duì)定位元素的top，bottom，left和right屬性將使其遠(yuǎn)離其正常位置進(jìn)行調(diào)整。其他內(nèi)容不會(huì)被調(diào)整以適應(yīng)元素留下的任何空白。
這個(gè)<div>元素的position:relative;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>position:relative的元素; 相對(duì)于其正常位置定位：</p>
<div class="relative">
這個(gè)div元素有position: relative;
</div>
</body>
</html>
position:fixed;
元素position:fixed;相對(duì)于視口定位，這意味著即使頁(yè)面滾動(dòng)，它也始終保持在同一位置。top，bottom，left和right屬性用于定位元素。固定元素不會(huì)在頁(yè)面中留下通常位于其中的間隙。注意頁(yè)面右下角的固定元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教程（jc2182.com）</title>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0; 新聞熱點(diǎn)
疑難解答
圖片精選
