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)
疑難解答
圖片精選