淺談css position absolute相對于父元素的設置方式

  發布時間:2019-10-10 15:01:02   作者:手指樂   我要評論
這篇文章主要介紹了淺談css position absolute相對于父元素的設置方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

大家知道css的position absolute默認是根據document來設置的,比如position:absolute后設置left:0;top:0這時候元素會顯示到頁面的左上角。

有時候我們需要在父元素的容器內設置相對的絕對位置

要做到這一點需要把父元素的position屬性設置為relative,設置為relative之后不設置left和top屬性,這時候父元素雖然是relative的,但是還是在原來位置。 然后把子元素的位置position設置為absolute的,并設置其left,top,right,bottom屬性,這樣就是相對于父元素的絕對位置了。

如下html示例代碼:

<!doctype html>
<html>
    <style type="text/css">
    #father {
       position: relative;
       width:600px;
       margin:auto;
       height:400px;
       border:1px solid red;
    }

    #son1 {
       position: absolute;
       top: 0;
       background:#f0f0f0;
    }

    #son2 {
       position: absolute;
       bottom: 0;
       background:blue;
    }
    </style>
    <body>
    <div id="father">
        <div id="son1">I am son1</div>
        <div id="son2">I am son2</div>
    </div>
    </body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • css position屬性為absolute時其百分值的計算

    這篇文章主要介紹了css position屬性為absolute時其百分值的計算,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小
    2019-08-06
  • CSS position:absolute全面了解

    下面小編就為大家帶來一篇CSS position:absolute全面了解。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-20
  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed,我們都知道absolute是絕對定位,relative是相對定位,但是這個絕對與相對是什么意思呢?絕對是什么地方的絕對,相對又
    2014-11-28
  • css中position屬性(absolute|relative|static|fixed)概述及應用

    position屬性的相關定義:static:無特殊定位,對象遵循正常文檔流;relative:對象遵循正常文檔流;absolute:對象脫離正常文檔流fixed:對象脫離正常文檔流,有興趣的朋友
    2013-04-08
  • CSS position屬性absolute relative等五個值的解釋

    目前幾乎所有主流的瀏覽器都支持position屬性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE瀏覽器,IE9、IE10還沒測試過),以下是w3school對position五個值的
    2012-12-15

最新評論

pc蛋蛋计划下载