定位

    定位有三種 : html

  1.相對定位    position: relative;瀏覽器

  2.絕對定位    position: absolute;ide

  3.固定定位    position: fixed;佈局

相對定位

 相對定位 : 相對於本身原來的位置定位. position: relative;spa

   現象和使用:3d

    1.若是對當前元素僅僅設置了相對定位,那麼與標準流的盒子什麼區別。code

    2.設置相對定位以後,咱們纔可使用四個方向的屬性: top、bottom、left、righthtm

  特性:blog

    1.不脫標頁面佈局

    2.形影分離

    3.老家留坑(佔着茅房不拉屎,噁心人)

  因此說相對定位 在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果

  用途:

    1.微調元素位置

    2.作絕對定位的參考(父相子絕)********。

    3.提高層級(不建議)

  參考點:

    本身原來的位置作參考點。

    示例:

 

絕對定位

            position: absolute;           

  特性:

    1.脫標 : 不佔位置

    2.作遮蓋效果,提成了層級。(建議使用)

    3.設置絕對定位以後,不區分行內元素和塊級元素,都能設置寬高。

  參考點(重點):

  1、單獨一個絕對定位的盒子

    1.當我使用top屬性描述的時候 是以頁面的左上角(跟瀏覽器的左上角區分)爲參考點來調整位置
    2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。

  2、以父輩盒子做爲參考點

    1.父輩元素設置相對定位,子元素設置絕對定位,那麼會以父輩元素左上角爲參考點,這個父輩元素不必定是爸爸,它也能夠是爺爺,曾爺爺。

    2.若是父親設置了定位,那麼以父親爲參考點。那麼若是父親沒有設置定位,那麼以父輩元素設置定位的爲參考點

    3.不單單是父相子絕,父絕子絕 ,父固子絕,都是以父輩元素爲參考點

注意了:父絕子絕,沒有實戰意義,作站的時候不會出現父絕子絕。由於絕對定位脫離標準流,影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中,是經常使用的佈局方案。由於父親設置相對定位,不脫離標準流,子元素設置絕對定位,僅僅的是在當前父輩元素內調整該元素的位置。

還要注意,絕對定位的盒子無視父輩的padding

做用:頁面佈局常見的「父相子絕」!

     示例 : 

 

    子絕父相---示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 992px;
            height: 460px;
            background-color: red;
            float: right;
            position: relative;
        }
        .prev{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            left: 0px;
        }
        .next{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            background-color: #000;
            color: #fff;
            top: 50%;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <span class="next">></span>
        <span class="prev"><</span>
    </div>
    
</body>
</html>
父相子絕

        絕對定位的盒子居中                      

 1 *{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         .box{
 6             width: 100%;
 7             height: 69px;
 8             background: #000;
 9         }
10         .box .c{
11             width: 960px;
12             height: 69px;
13             background-color: pink;
14             /*margin: 0 auto;*/
15             position: relative;
16             left: 50%;
17             margin-left: -480px;
18 
19             /*設置絕對定位以後,margin:0 auto;不起任何做用,若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位,而後left:50%; margin-left等於元素寬度的一半,實現絕對定位盒子居中*/
20         }
背下來就能夠了

 

固定定位

固定當前的元素不會隨着頁面滾動而滾動    position: fixed;

  特性: 

    1.脫標 : 不佔位置

    2.遮蓋,提高層級

    3.固定不變

  參考點:

    設置固定定位,用top描述。那麼是以瀏覽器的左上角爲參考點
    若是用bottom描述,那麼是以瀏覽器的左下角爲參考點

  做用:

    1.返回頂部欄

    2.固定導航欄

    3.小廣告

相關文章
相關標籤/搜索