浅谈css position absolute相对父元素的设定方法

日期:2021-02-28 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

大伙儿了解css的position absolute默认设置是依据document来设定的,例如position:absolute后设定left:0;top:0这时候候元素会显示信息到网页页面的左上角。

有时大家必须在父元素的器皿内设定相对性的肯定部位

要保证这1点必须把父元素的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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。