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

時間  2019-11-21
標籤 css 通俗 講解 定位 position 欄目 CSS 简体版
原文   原文鏈接

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

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

一、CSS(5)---通俗講解盒子模型html

二、CSS(6)---通俗講解浮動(float)算法

三、CSS(7)--- 通俗講解清除浮動瀏覽器

1、爲何要用定位？

若是說浮動關鍵在一個 「浮」 字上面， 那麼 咱們的定位，關鍵在於一個 「位」 上。post

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

一、打Log標籤

好比你想在商品的圖片想打個標籤好比：包郵、最新上架等等。3d

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

那你又須要從新p圖。這樣確定是不合適的。那怎麼作比較合適？htm

其實很簡單，將商品圖片和標籤的標籤分開來。而後經過css在商品圖片上添加標籤。這個時候一般會定位去完成。對象

二、切換Banner

有些商城的首頁都會有個Banner，這裏 左右的箭頭 和 下面的小點點通常也是用定位來作。

三、廣告位窗口

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

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


2、定位概念

一、定位的分類

在CSS中，position 屬性用於定義元素的定位模式，其基本語法格式以下：

選擇器 {position:屬性值;}

屬性值

這裏還有個概念就是 邊偏移 由於你定位確定要指定定位在哪裏，因此須要經過 邊偏移 來指定。

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

二、靜態定位(static)

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

因此若是須要使用定位那這裏就不能是這個默認值了。

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

三、相對定位(relative)

它的主要特色以下

一、 參照元素原來的位置進行移動。
二、 經過"left"、 "top"、 "right"、 "bottom" 屬性進行定位。
三、 元素原有的空間位保留。
四、 元素在移動時會蓋住其餘元素。

舉例說明

<!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>

運行結果

經過咱們這個示例咱們能夠看出

一、它的左右,上下邊偏移的量是根據這個div2原始位置基礎上進行移動的。
二、這個div2它仍是個標準流，並無浮起來，因此這個位置它仍是佔有的。(若是div2浮動那麼div3就會向上移動，這裏顯然沒有)
三、當它偏移後 若是和其它元素有重疊，它會覆蓋其它元素。（div2覆蓋了部分div3元素）

做用 個人理解相對定位主要用途是用來給絕對定位的一個盒子。（下面會解釋這句話）

四、絕對定位absolute

特色

一、參照距離他最近的有定位屬性的父級元素進行移動
二、經過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
三、元素徹底脫離文檔流，原有位置再也不保留
四、元素在移動時會蓋住其餘元素
五、通常咱們設置絕對定位時，都會找一個合適的父級將其設置爲相對定位。最好爲這個具備相對定位屬性的父級設置寬高

舉例說明

<!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;

再刷新頁面

從這張圖很直觀看到:

一、由於父div設置了定位，因此這裏的邊偏移變成都是相對於父div進行偏移（正常貼標籤就是這樣）
二、咱們能夠看出當設置絕對定位後，該元素已經脫離文檔流，已經浮上來了（由於div2上浮全部div3纔會上移）
三、元素在移動時會蓋住其餘元素 （div2覆蓋了部分div3）

五、固定定位(fixed)

特色

一、以body爲定位時的對象，老是根據瀏覽器的窗口來進行元素的定位
二、經過"left"、 "top"、 "right"、 "bottom" 屬性進行定位
三、元素徹底脫離文檔流，原有位置再也不保留
四、元素不會隨着文檔流的滑動而滑動

固定定位最大的特色就是第一點，能夠理解成它是以可視區域爲準，會一直顯示在可視區域，屏幕滑動也會顯示在定位的位置。

六、四種定位總結

還有比較重要的三點

定位模式轉換

跟 浮動同樣， 元素添加了 絕對定位和固定定位以後， 元素模式也會發生轉換， 都自動轉換爲 行內塊元素。

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

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

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

1. 首先left 50%   父盒子的一半大小
2. 而後走本身外邊距負的一半值就能夠了 margin-left。

子絕父相

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

爲何會有這個概念，那是由於絕對定位的邊偏移特色是

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

通常咱們確定是但願根據父元素偏移。就比如圖片打標籤，不可能跟着body偏移而是父元素進行定位。並且父元素相對定位最大的好處就是它會佔有位置，所以父親最好是 相對定位。


3、經典示例

一、打上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>

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

二、定位水平居中

加了定位 浮動的的盒子 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;  /*減去總寬度通常*/

三、輪播圖

<!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>

運行結果


參考

一、w3school之CSS 定位 (Positioning)

二、CSS 定位（postion、z-index）




你若是願意有所做爲，就必須善始善終。(10)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程