HTML中的定位

次我們來說一下，HTML網(wǎng)頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網(wǎng)頁的展示效果中，我們的各種樣式，標簽，圖片等東西都是出現(xiàn)在網(wǎng)頁的各個位置，網(wǎng)頁看起來很美觀，各種盒模型擺放合理，這是因為在HTML中有定位的能力，今天我們就來學(xué)習(xí)一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進行定位，但保留自己原來的位置，別的元素?zé)o法占用），absolute（絕對定位：相對于有定位的父級進行定位，如果沒有則相對于文檔進行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進行定位的，我們有l(wèi)eft，top，right，bottom，五個屬性分別對應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結(jié)果來看一下：

沒有定位的樣式

加了relative

加了relative的結(jié)果

上面這個結(jié)果圖看著比例不太對是因為作者截圖沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

加了absolute

加了absolute的結(jié)果

這個結(jié)果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓?zhí)砑尤魏螛邮剑垐D片只是作為參照物。

SS定位機制

CSS 有三種基本的定位機制：相對定位、浮動和絕對定位。

相對定位

相對定位指的是設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

如果將box2的框 top 設(shè)置為 50px，那么框?qū)⒃谠恢庙敳肯旅?50 像素的地方。如果 left 設(shè)置為 20 像素，那么會在元素左邊創(chuàng)建 20 像素的空間，也就是將元素向右移動。

只要box2設(shè)置了position為relative ，box1和box3始終不會因為box2的改變而改變。

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>相對定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}

.box2 {
position: relative;
left: 20px;
top: 50px;
}

</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>

浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。

1.當都不設(shè)置浮動時：

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body></html>

2.當設(shè)置box1向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了box1 2，使box12 從視圖中消失。

<!DOCTYPE html><html lang="en">
<head><meta charset="utf-8">
<title>不設(shè)置浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
} .box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1 {
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>

3.當都設(shè)置為浮動時，box1 向左浮動直到碰到包含框，另外兩個box向左浮動直到碰到前一個浮動框。

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>不設(shè)置浮動</title>
<style type="text/css">
#main {
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body></html>

4.清除浮動，要想阻止行框圍繞浮動框，需要對該框應(yīng)用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應(yīng)該挨著浮動框。

詳細的可以參考：http://www.w3school.com.cn/css/css_positioning_floating.asp

絕對定位

設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素。可以通過設(shè)置 z-index 屬性來控制這些框的堆放次序。

當設(shè)置box2的position為absolute時，它就會脫離文檔，相當于不存在。

<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf-8">
<title>絕對定位</title>
<style type="text/css">
.box {
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2 {
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body></html>

文/丁向明

做一個有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com

家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS定位。

一、Position(定位)

CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，并指定一個元素的內(nèi)容太大時，應(yīng)該發(fā)生什么。

元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法。

二、屬性

1. Static 定位（默認效果）

HTML元素的默認值，即沒有定位，元素出現(xiàn)在正常的流中。

靜態(tài)定位的元素不會受到top, bottom, left, right影響。

2. Fixed 定位

元素的位置相對于瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動：

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
    <head>
        <style>
            p.pos_fixed {
                position: fixed;
                top: 30px;
                right: 5px;
            }
</style>
    </head>


    <body>


        <p class="pos_fixed">Some more text</p>
        <p><b>Note:</b> 代碼使人進步！！！.</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>


    </body>


</html>

注意：

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

Fixed定位的元素和其他元素重疊。

3. Relative 定位

相對定位元素的定位是相對其正常位置。

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title> 定位</title>


    <head>
        <style>
            h2.pos_left {
                position: relative;
                left: -20px;
            }


            h2.pos_right {
                position: relative;
                left: 20px;
            }
</style>
    </head>


    <body style="background-color:azure;">


        <p>Some more text</p>
        <p><b>Note:</b> 代碼使人進步！！！.</p>
        <h2 class="pos_left">This heading is moved left according to its normal position</h2>
        <h2 class="pos_right">This heading is moved right according to its normal position</h2>


    </body>


</html>

可以移動的相對定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會改變。

h2.pos_top{
    position:relative;
    top:-50px;
}

相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。

4. Absolute 定位

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:

h2{
    position:absolute;
    left:100px;
    top:150px;
}

Absolutely定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

Absolutely定位的元素和其他元素重疊。

三、重疊的元素

元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面，或后面）

一個元素可以有正數(shù)或負數(shù)的堆疊順序：

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

四、總結(jié)

本文基于Html基礎(chǔ)，主要介紹了CSS中四種定位的方式。對于四種的定位表現(xiàn)形式，用豐富的案例，代碼效果圖的展示，幫助大家更好理解。

最后，希望可以幫助大家更好的學(xué)習(xí)CSS3。

在線咨詢

上一篇：怎么把Word轉(zhuǎn)換為網(wǎng)頁html格式
下一篇：大報文問題實戰(zhàn)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商