CSS(8)—通俗講解定位(position)

CSS(8)—通俗講解定位(position)

CSS有三種基本的定位機制: 普通流浮動定位。前面兩個之前已經講過,詳見博客:

1、

2、

3、

一、為什麼要用定位?

如果說浮動關鍵在一個 “浮” 字上面, 那麼 我們的定位,關鍵在於一個 “位” 上。

我們來思考下定位用於的場景。

1、打Log標籤

比如你想在商品的圖片想打個標籤比如:包郵、最新上架等等。

怎麼做比較好呢,如果你要粗暴那就直接ps在圖片上添加標籤。只是這樣有個很大的弊端,比如你要添加新標籤你需要重現修圖,比如商品之前包郵後面不包郵了,

那你又需要重新p圖。這樣肯定是不合適的。那怎麼做比較合適?

其實很簡單,將商品圖片和標籤的標籤分開來。然後通過css在商品圖片上添加標籤。這個時候通常會定位去完成。

2、切換Banner

有些商城的首頁都會有個Banner,這裏 左右的箭頭下面的小點點一般也是用定位來做。

3、廣告位窗口

有些位置在左右側會有固定的廣告窗口,不論怎麼滑動頁面這個廣告窗口都是在固定位置

這個就需要用到固定定位了。

二、定位概念

1、定位的分類

在CSS中,position 屬性用於定義元素的定位模式,其基本語法格式如下:

選擇器 {position:屬性值;}

屬性值

這裏還有個概念就是 邊偏移 因為你定位肯定要指定定位在哪裡,所以需要通過 邊偏移 來指定。

所以定位是要和邊偏移搭配使用的。不過對於static(靜態定位)設置邊偏移是無用的。

2、靜態定位(static)

static 是此屬性的默認值。這時候,我們稱那個元素沒有被定位。簡單來說就是網頁中所有元素都默認的是靜態定位。 其實就是標準流的特性。

所以如果需要使用定位那這裏就不能是這個默認值了。

注意 在靜態定位狀態下,此時 top, right, bottom, left 和 z-index 屬性無效。

3、相對定位(relative)

它的主要特點如下

1、 參照元素原來的位置進行移動。
2、 通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。
3、 元素原有的空間位保留。
4、 元素在移動時會蓋住其他元素。

舉例說明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>相對定位</title>
        <style type="text/css">
            #one {
                width: 120px;
                height: 120px;
                background: #E19D59;
            }
            #two {
                width: 120px;
                height: 120px;
                background: #FF0000;
                position: relative;   /*設置相對定位*/
                left: 20px;           /*設置距離左邊偏移位置*/
                top: 20px;            /*設置距離頂部偏移位置*/
            }
            #three {
                width: 120px;
                height: 120px;
                background: #008000;
            }
        </style>
    </head>
    <body>      
        <div id="one">div1</div>
        <div id="two">div2</div>
        <div id="three">div3</div>        
    </body>
</html>

運行結果

通過我們這個示例我們可以看出

1、它的左右,上下邊偏移的量是根據這個div2原始位置基礎上進行移動的。
2、這個div2它還是個標準流,並沒有浮起來,所以這個位置它還是佔有的。(如果div2浮動那麼div3就會向上移動,這裏顯然沒有)
3、當它偏移后 如果和其它元素有重疊,它會覆蓋其它元素。(div2覆蓋了部分div3元素)

作用 我的理解相對定位主要用途是用來給絕對定位的一個盒子。(下面會解釋這句話)

4、絕對定位absolute

特點

1、參照距離他最近的有定位屬性的父級元素進行移動
2、通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
3、元素完全脫離文檔流,原有位置不再保留
4、元素在移動時會蓋住其他元素
5、一般我們設置絕對定位時,都會找一個合適的父級將其設置為相對定位。最好為這個具有相對定位屬性的父級設置寬高

舉例說明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
           #father{
                width: 400px;
                height: 400px;
                margin: 100px;
               /*  position: relative;*/
                background: yellow;
            }
            #bd1{
                width: 120px;
                height: 120px;
                background: #E19D59;
            }
            #bd2{
                width: 120px;
                height: 120px;
                background: #FF0000;
                position: absolute;
                left: 20px;
                top: 20px;
            }
            #bd3{
                width: 120px;
                height: 120px;
                background: #008000;
            }
        </style>
    </head>
    <body>  
    <div id="father"> 
        <div id="bd1">div1</div>
        <div id="bd2">div2</div>
        <div id="bd3">div3</div>  
    </div>         
    </body>
</html>

運行結果

從這幅圖可以看出一點

這裏因為父div沒有設置定位,所以它的位置是相對於body進行邊偏移。

這個時候我們將父標籤設置 position: relative;

再刷新頁面

從這張圖很直觀看到:

1、因為父div設置了定位,所以這裏的邊偏移變成都是相對於父div進行偏移(正常貼標籤就是這樣)
2、我們可以看出當設置絕對定位后,該元素已經脫離文檔流,已經浮上來了(因為div2上浮所有div3才會上移)
3、元素在移動時會蓋住其他元素 (div2覆蓋了部分div3)

5、固定定位(fixed)

特點

1、以body為定位時的對象,總是根據瀏覽器的窗口來進行元素的定位
2、通過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
3、元素完全脫離文檔流,原有位置不再保留
4、元素不會隨着文檔流的滑動而滑動

固定定位最大的特點就是第一點,可以理解成它是以可視區域為準,會一直显示在可視區域,屏幕滑動也會显示在定位的位置。

6、四種定位總結

還有比較重要的三點

定位模式轉換

跟 浮動一樣, 元素添加了 絕對定位和固定定位之後, 元素模式也會發生轉換, 都自動轉換為 行內塊元素。

絕對定位的盒子水平/垂直居中

注意 普通的盒子是左右margin 改為 auto就可, 但是對於絕對定位就無效了。

定位的盒子也可以水平或者垂直居中,有一個算法(下面會舉例說明)。

1. 首先left 50%   父盒子的一半大小
2. 然後走自己外邊距負的一半值就可以了 margin-left。

子絕父相

這句話的意思是 子級是絕對定位的話,父級要用相對定位

為什麼會有這個概念,那是因為絕對定位的邊偏移特點是

 如果父元素沒有設置定位,那麼它的位置是相對於body進行邊偏移。如果父元素設置定位,那就根據父元素偏移。

一般我們肯定是希望根據父元素偏移。就好比圖片打標籤,不可能跟着body偏移而是父元素進行定位。而且父元素相對定位最大的好處就是它會佔有位置,因此父親最好是 相對定位。

三、經典示例

1、打上log標記

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>log標籤</title>
    <style>
    div {
        width: 310px;
        height: 190px;
        border: 1px solid #ccc;
        margin: 100px auto; 
        position: relative;  /*父選擇相對定位*/
    }
    .top {
        position: absolute; /*子取相對定位*/
        top: 0;             /*位置 左上*/
        left: 0;
    }
    
    </style>
</head>
<body>
    <div>
        <img src="images/log.jpg" alt="" class="top">     <!-- log的圖片 -->
        <img src="images/goods.jpg" height="190" width="310" alt=""> <!-- 商品圖片,長和寬和父div大小一致 -->
    </div>
</body>
</html>

運行結果就是上面的最終結果。

2、定位水平居中

加了定位 浮動的的盒子 margin 0 auto 失效了

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        /*加了定位 浮動的的盒子  margin 0 auto 失效了*/
        left: 50%;
        margin-left: -100px;  /*減去總寬度一般*/
        top: 50%;
        margin-top: -100px;   /*減去總高度一般*/
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

這個這個div就處於整個頁面的居中了,這裏我們來說明下下面這兩個的意思

        left: 50%;
        margin-left: -100px;  /*減去總寬度一般*/

3、輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .tb {
        width: 520px;
        height: 280px;
        background-color: pink;
        margin: 100px auto;
        position: relative;
    }
    .tb a {
        width: 24px;
        height: 36px;
        
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -18px;
    }
    .left {
        left: 0;
        background: url(images/left.png) no-repeat;
    }
    .right {
        right: 0;
        background: url(images/right.png) no-repeat;
    }
    .tb ul {
        width: 70px;
        height: 13px;
        background: rgba(255, 255, 255, .3);
        position: absolute; /* 加定位*/
        bottom: 18px;
        left: 50%; /*水平走父容器的一半*/
        margin-left: -35px; /*左走自己的一半*/
        border-radius: 8px;
    }
    .tb ul li {
        width: 8px;
        height: 8px;
        background-color: #fff;
        float: left;
        margin: 3px;
        border-radius: 50%;
    }
    .tb .current {
        background-color: #f40;
    }
    </style>
</head>
<body>
    <div class="tb">
        <img src="images/tb.jpg" >
        <a href="#" class="left"></a>
        <a href="#" class="right"></a>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>
</body>
</html>

運行結果

參考

1、

2、

你如果願意有所作為,就必須有始有終。(10)

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選

您可能也會喜歡…