定位(positioning)

一、position（檢索對(duì)象的定位方式）

成都創(chuàng)新互聯(lián)專注于市北企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。市北網(wǎng)站建設(shè)公司,為市北等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

1.語法 position: static / relative /absolute /fixed /center /page /sticky

static：對(duì)象遵循常規(guī)流。此時(shí)4個(gè)定位偏移屬性不會(huì)被應(yīng)用。
relative：對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個(gè)定位偏移屬性進(jìn)行偏移時(shí)不會(huì)影響常規(guī)流中的任何元素。
absolute：對(duì)象脫離常規(guī)流，此時(shí)偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。
fixed：與absolute一致，但偏移定位是以窗口為參考。當(dāng)出現(xiàn)滾動(dòng)條時(shí)，對(duì)象不會(huì)隨著滾動(dòng)。
center：與absolute一致，但偏移定位是以定位祖先元素的中心點(diǎn)為參考。盒子在其包含容器垂直水平居中。（CSS3）
page：與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個(gè)absolute模式。（CSS3）
sticky：對(duì)象在常態(tài)時(shí)遵循常規(guī)流。它就像是relative和fixed的合體，當(dāng)在屏幕中時(shí)按常規(guī)流排版，當(dāng)卷動(dòng)到屏幕外時(shí)則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實(shí)中你見到的吸附效果。（CSS3）

2.說明

檢索對(duì)象的定位方式。

當(dāng)position的值為非static時(shí)，其層疊級(jí)別通過z-index屬性定義。
絕對(duì)定位的元素，在top，right，bottom，left屬性未設(shè)置時(shí)，會(huì)緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。
對(duì)應(yīng)的腳本特性為position。

3.舉例

<!DOCTYPE html>

<head>

<title>position_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)</title>

<style>

#position {

position: absolute;

top: 50%;

left: 50%;

width: 150px;

height: 40px;

margin: -20px 0 0 -75px;

padding: 0 10px;

background: #eee;

line-height: 2.4;

}

</style>

</head>

<body>

<div id="position">水平垂直居中的對(duì)象</div>

</body>

</html>

二、z-index（檢索或設(shè)置對(duì)象的層疊順序）

1.語法 z-index:auto/integer

2.取值

auto：元素在當(dāng)前層疊上下文中的層疊級(jí)別是0。元素不會(huì)創(chuàng)建新的局部層疊上下文，除非它是根元素。
integer：用整數(shù)值來定義堆疊級(jí)別。可以為負(fù)值。

3.說明

檢索或設(shè)置對(duì)象的層疊順序。

z-index用于確定元素在當(dāng)前層疊上下文中的層疊級(jí)別，并確定該元素是否創(chuàng)建新的局部層疊上下文。
每個(gè)元素層疊順序由所屬的層疊上下文和元素本身的層疊級(jí)別決定（每個(gè)元素僅屬于一個(gè)層疊上下文）。
同一個(gè)層疊上下文中，層疊級(jí)別大的顯示在上面，反之顯示在下面。
同一個(gè)層疊上下文中，層疊級(jí)別相同的兩個(gè)元素，依據(jù)它們?cè)贖TML文檔流中的順序，寫在后面的將會(huì)覆蓋前面的。
不同層疊上下文中，元素的顯示順序依據(jù)祖先的層疊級(jí)別來決定，與自身的層疊級(jí)別無關(guān)。
當(dāng)z-index未定義或者值為auto時(shí)，在IE6,7下會(huì)創(chuàng)建新的局部層疊上下文，而在高級(jí)瀏覽器中，按照規(guī)范不產(chǎn)生新的局部層疊上下文，如下例：

3.舉例

<!DOCTYPE html>

<head>

<title>z-index_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title>

<style>

.z1,

.z2,

.z3 {

position: absolute;

width: 200px;

height: 100px;

padding: 5px 10px;

color: #fff;

text-align: right;

}

.z1 {

z-index: 1;

background: #000;

}

.z2 {

z-index: 2;

top: 30px;

left: 30px;

background: #C00;

}

.z3 {

z-index: 3;

top: 60px;

left: 60px;

background: #999;

}

</style>

</head>

<body>

<div class="z1">z-index:1</div>

<div class="z2">z-index:2</div>

<div class="z3">z-index:3</div>

</body>

</html>

三、top

四、right

五、bottom

六、left

七、clip

網(wǎng)站欄目：定位(positioning)
當(dāng)前路徑：http://www.2m8n56k.cn/article36/jssipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站營銷、網(wǎng)站改版、微信小程序、響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

定位(positioning)