html第五课时绝对定位和相对定位

最新推荐文章于 2021-07-25 16:03:48 发布

summerG1

最新推荐文章于 2021-07-25 16:03:48 发布

阅读量766

点赞数

分类专栏： html总结

本文链接：https://blog.csdn.net/gmdjajy/article/details/38257073

版权

html总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>2014年7月28日18:58:03</title>
    <style>
        .outer-box{
            width: 100%;
            height: 200px;
            border: 10px solid #b26ba2;
            /*margin: 0 auto;*/
            padding: 1.5em;
            box-sizing: border-box;
            /*position: absolute;*//*相对于屏幕，不相对于任何盒子*//*
            left: 0em;
            top: 0em;*/
            position: relative;
            top: 0;
            right: 0;
            margin-top: 100px;
        }

        .outer-box div{
            float: left;
            height: 100px;
            width: 100px;
            border: 1px dashed black;
            /*margin: 10px;*/
        }
        .son1{
            background: red;
            position: relative;
            float: right;
            /*right: 50px;*//*相对于原位置的right有50px,相对于屏幕是向左移动*//*
            bottom: 50px;*//*相对于原位置的bottom有50px,相对于屏幕是向上移动*/
            z-index: 100;
        }
        .son2{
            background: #424fff;
            position: absolute;
            right: 0;
            top: 0;
        }

    </style>

</head>
<body>
    <div  class="outer-box">
        <div class="son1">

        </div>
        <div class="son2">

        </div>
        <p style="clear:both;"></p>
    </div>
</body>
</html>

当父盒子没有相关的定位设置时，他的子盒子的绝对定位则是以屏幕作为父盒子。

所以当想要子盒子以当天父盒子为依靠的时候，父盒子要做定位设置，做相对定位和绝对定位都可以。

相对定位的left或者top值都是相对于自己原先的位置，如果都设置为0，0的话，则相当于没有改变位置。

summerG1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录