css的position屬性

時間 2019-11-26

標籤 css position 屬性欄目 CSS 简体版

原文原文鏈接

Html css position屬性css

position屬性把元素放置在一個靜態的,相對的,絕對的,或則固定的位置中.html

1,第一個屬性absolute,絕對定位前端

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。瀏覽器

元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定學習

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*絕對定位*/
 
    div.pos_abs{
        position:absolute;
        left:100px;
        top:150px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div{
        border:2px solid black;
    }
    </style>
    <body>
        <div class="pos_abs">
            這是一個絕對定位的盒子
        </div>
        <div>
            經過絕對定位,元素能夠放置在頁面上的任何位置,下面的黑色盒子距離頁面左側100px,距離頁面頂部150px.
        </div>
    </body>
</html>

咱們能夠改一下第二個div class="pos_abs"的width:500px和height:500px,會發現絕對定位盒子的位置始終不會改變,會在第二個div的內部.spa

2,第二個屬性fixed:固定定位元素,相對於瀏覽器窗口進行定位

元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*定位*/
 
    div.pos_abs{
 
        /*下面是一個基於static的絕對定位*/
        /*position:absolute;*/
 
        /*下面是一個基於瀏覽器窗口的固定定位*/
        position:fixed;
        left:100px;
        top:150px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div{
        border:2px solid black;
        width:500px;
        height:500px;
    }
    </style>
    <body>
        <div class="pos_abs">
            這是一個固定定位的盒子
        </div>
        <div>
            經過fixed固定定位,元素能夠放置在頁面上的任何位置,下面的黑色盒子距離瀏覽器窗口左側100px,距離瀏覽器窗口頂部150px.當咱們滾動頁面時,黑盒子和瀏覽器窗口的相對位置不會發生任何變化.
        </div>
        <div>此盒子用來撐開頁面高度</div>
        <div>此盒子用來撐開頁面高度</div>
    </body>
</html>

用兩個盒子撐開頁面高度,當咱們使頁面向下滾動的時候,會發現fixed固定的黑盒子,始終以瀏覽器窗口爲參照,固定在頁面上.htm

3,relative 生成相對定位的元素，相對於其正常位置進行定位。

下面我只給css樣式,代碼不在重複寫了blog

div.pos_abs{
 
        /*下面是一個基於static的絕對定位*/
        /*position:absolute;*/
 
        /*下面是一個基於瀏覽器窗口的絕對定位*/
        /*position:fixed;
        left:100px;
        top:150px;*/
 
        /*下面是一個相對定位*/
        position:relative;
        left:-20px;
        top:-10px;
        width:200px;
        height:200px;
        background-color:black;
        color:white;
        text-align:center;

在瀏覽器中打開能夠看到,黑色盒子的一部分已經到了頁面外部,盒子相對於它原來該有的位置進行位置的調整.繼承

4,另外還有兩個屬性static:默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

inherit:規定應該從父元素繼承 position 屬性的值(static和inherit不是很經常使用)

5,一個經常使用的組合"子絕父相",子盒子採用絕對定位(absolute),父盒子用相對定位(relative),將子盒跟父盒子的相對位置綁定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位</title>
    </head>
    <style>
    /*定位*/
 
    div.pos_relative{
 
        /*下面是一個基於static的絕對定位*/
        /*position:absolute;*/
 
        /*下面是一個基於瀏覽器窗口的絕對定位*/
        /*position:fixed;
        left:100px;
        top:150px;*/
 
        /*下面是一個相對定位*/
        position:relative;
        left:20px;
        top:10px;
        width:500px;
        height:500px;
        background-color:black;
        color:white;
        text-align:center;
    }
    div.pos_abs{
        position:absolute;
        left:50px;
        top:70px;
        border:2px solid black;
        width:200px;
        height:200px;
        background: white;
        color:black;
    }
    div{
        width:500;
        height:500px;
        border:2px solid black;
    }
    </style>
    <body>
        <div class="pos_relative">
            這是一個定位的父盒子
            <div class="pos_abs">
            (子盒子)子盒子會跟着父盒子一塊兒變更,經過子絕父相,將兩盒子的相對位置綁定.
            </div>
        </div>
        
        <div>此盒子用來撐開頁面高度</div>
        <div>此盒子用來撐開頁面高度</div>
    </body>
</html>

信不少人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一我的學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料喜歡個人文章想與更多資深大牛一塊兒討論和學習的話歡迎加入個人學習交流羣907694362

1. css的position屬性
2. CSS position 屬性
3. CSS position屬性、float屬性
4. CSS中Position屬性
5. CSS 之 Position 屬性
6. CSS 佈局的position屬性、float屬性
7. CSS中的Position屬性 overflow 屬性
8. CSS中的Position屬性
9. 關於CSS的position屬性
10. css中float和position屬性
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。