亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

有時候我們需要在父元素的容器內(nèi)設(shè)置相對的絕對位置

要做到這一點需要把父元素的position屬性設(shè)置為relative，設(shè)置為relative之后不設(shè)置left和top屬性，這時候父元素雖然是relative的，但是還是在原來位置。 然后把子元素的位置position設(shè)置為absolute的，并設(shè)置其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>

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

相關(guān)文章

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

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

  • CSS position:absolute全面了解

    下面小編就為大家?guī)硪黄狢SS position:absolute全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-20

  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又
    2014-11-28

  • css中position屬性(absolute|relative|static|fixed)概述及應用

    position屬性的相關(guān)定義：static：無特殊定位，對象遵循正常文檔流;relative：對象遵循正常文檔流;absolute：對象脫離正常文檔流fixed：對象脫離正常文檔流，有興趣的朋友
    2013-04-08

  • CSS position屬性absolute relative等五個值的解釋

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

最新評論