建站
咨詢
售后
建站咨詢
新聞中心
本文向大家描述一下CSS定位語(yǔ)法應(yīng)用，CSS定位中有幾種屬性的設(shè)置，每種屬性都有各自的語(yǔ)法和取值，這里和大家分享一下，比如position屬性，它共有四種取值，分別是static、absolute、fixed和relative。
員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過(guò)團(tuán)隊(duì)的力量開(kāi)發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)公司堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、微信公眾號(hào)開(kāi)發(fā)、電商網(wǎng)站開(kāi)發(fā)，成都微信小程序，軟件定制網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
詳解CSS定位語(yǔ)法應(yīng)用
一、CSS定位：position
◆語(yǔ)法：
position:static|absolute|fixed|relative
◆取值：
static:默認(rèn)值。無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則。
absolute:將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象。而其層疊通過(guò)z-index屬性定義。
fixed:未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范。
relative:對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置。
◆說(shuō)明：檢索對(duì)象的定位方式。
設(shè)置此屬性值為absolute會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同z-index屬性的對(duì)象已經(jīng)占據(jù)了給定的位置，他們之間不會(huì)相互影響，而會(huì)在同一位置層疊。此時(shí)對(duì)象不具有外補(bǔ)丁(margin)，但仍有內(nèi)補(bǔ)丁(padding)和邊框(border)。
要激活對(duì)象的絕對(duì)(absolute)定位，必須指定left，right，top，bottom屬性中的至少一個(gè)，并且設(shè)置此屬性值為absolute。否則上述屬性會(huì)使用他們的默認(rèn)值auto，這將導(dǎo)致對(duì)象遵從正常的HTML布局規(guī)則，在前一個(gè)對(duì)象之后立即被呈遞。
設(shè)置此屬性值為relative會(huì)保持對(duì)象在正常的HTML流中，但是它的位置可以根據(jù)它的前一個(gè)對(duì)象進(jìn)行偏移。在相對(duì)(relative)定位對(duì)象之后的文本或?qū)ο笳加兴麄冏约旱目臻g而不會(huì)覆蓋被定位對(duì)象的自然空間。與此不同的，在絕對(duì)(absolute)定位對(duì)象之后的文本或?qū)ο笤诒欢ㄎ粚?duì)象被拖離正常文檔流之前會(huì)占有它的自然空間。放置絕對(duì)(absolute)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。而放置相對(duì)(relative)定位對(duì)象在可視區(qū)域之外，滾動(dòng)條不會(huì)出現(xiàn)。
內(nèi)容的尺寸會(huì)根據(jù)布局確定對(duì)象的尺寸。例如，設(shè)置一個(gè)div對(duì)象的height和position屬性，則div對(duì)象的內(nèi)容將決定它的寬度(width)。
此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為position。
◆示例：
- div{position:relative;top:-3px}
二、CSS定位：Z-index
◆語(yǔ)法：
z-index:auto|number
◆取值：
auto:默認(rèn)值。遵從其父對(duì)象的定位
number:無(wú)單位的整數(shù)值。可為負(fù)數(shù)
◆說(shuō)明：
檢索或設(shè)置對(duì)象的層疊順序。
較大number值的對(duì)象會(huì)覆蓋在較小number值的對(duì)象之上。如兩個(gè)絕對(duì)定位對(duì)象的此屬性具有同樣的number值，那么將依據(jù)它們?cè)贖TML文檔中聲明的順序?qū)盈B。對(duì)于未指定此屬性的絕對(duì)定位對(duì)象，此屬性的number值為正數(shù)的對(duì)象會(huì)在其之上，而number值為負(fù)數(shù)的對(duì)象在其之下。設(shè)置參數(shù)為null可以移除此屬性。
此屬性僅僅作用于position屬性值為relative或absolute的對(duì)象。這個(gè)屬性不會(huì)作用于窗口控件，如select對(duì)象。在IE5.5+中，iframe對(duì)象開(kāi)始支持此屬性。而在之前的瀏覽器版本中，iframe對(duì)象是窗口控件，會(huì)忽略此屬性。此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為zIndex。
◆示例：
- div{position:absolute;z-index:3;width:6px;}
#p#三、CSS定位：top
◆語(yǔ)法：
top:auto|length
◆取值：
auto:默認(rèn)值。無(wú)特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。
length:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值|百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。
◆說(shuō)明：
檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象頂邊相關(guān)的位置。
此屬性僅僅在對(duì)象的定位(position)屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為top。其值為一字符串，所以不可用于腳本(Scripts)中的計(jì)算。請(qǐng)使用style對(duì)象的posTop，pixelTop等運(yùn)行時(shí)特性，以及對(duì)象的offsetTop等特性。
◆示例：
以下是引用片段：
- div{position:absolute;top:1in;}
- iv{position:relative;top:-3px;left:6px;}
四、CSS定位：right
◆語(yǔ)法：
right:auto|length
◆取值：
auto:默認(rèn)值。無(wú)特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。
length:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值|百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。
◆說(shuō)明：
檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象右邊相關(guān)的位置。
此屬性僅僅在對(duì)象的定位(position)屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為right。其值為一字符串，所以不可用于腳本(Scripts)中的計(jì)算。請(qǐng)使用style對(duì)象的posRight，pixelRight等運(yùn)行時(shí)特性。
◆示例：
以下是引用片段：
- div{position:absolute;right:1in;}
- div{position:relative;top:-3px;right:6px;}
#p#五、CSS定位：bottom
◆語(yǔ)法：
bottom:auto|length
◆取值：
auto:默認(rèn)值。無(wú)特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。
length:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值|百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。
◆說(shuō)明：
檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象底邊相關(guān)的位置。此屬性僅僅在對(duì)象的定位(position)屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為bottom。其值為一字符串，所以不可用于腳本(Scripts)中的計(jì)算。請(qǐng)使用style對(duì)象的posBottom，pixelBottom等運(yùn)行時(shí)特性。
◆示例：
以下是引用片段：
- div{position:absolute;bottom:1in;}
- div{position:relative;bottom:6px;}
六、CSS定位：left
◆語(yǔ)法：
left:auto|length
◆取值：
auto:默認(rèn)值。無(wú)特殊定位，根據(jù)HTML定位規(guī)則在文檔流中分配。
length:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值|百分?jǐn)?shù)。必須定義position屬性值為absolute或者relative此取值方可生效。
◆說(shuō)明：
檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象左邊相關(guān)的位置。
此屬性僅僅在對(duì)象的定位(position)屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。此屬性對(duì)于currentStyle對(duì)象而言是只讀的。對(duì)于其他對(duì)象而言是可讀寫的。對(duì)應(yīng)的腳本特性為left。其值為一字符串，所以不可用于腳本(Scripts)中的計(jì)算。請(qǐng)使用style對(duì)象的posLeft，pixelLeft等運(yùn)行時(shí)特性，以及對(duì)象的offsetLeft等特性。
◆示例：
以下是引用片段：
- div{position:absolute;left:1in;}
- div{position:relative;top:-3px;left:6px;}
分享名稱：詳解CSS定位語(yǔ)法應(yīng)用
轉(zhuǎn)載源于：http://www.dlmjj.cn/article/djoopgi.html
