浮动float应用示例以及定位

最新推荐文章于 2022-02-24 16:59:45 发布

想要成为大佬的小萌新

最新推荐文章于 2022-02-24 16:59:45 发布

阅读量244

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/taotaoaiqinqin/article/details/80340263

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动float应用示例以及定位</title>
        <style>
            #parent{
                width: 400px;
                height: 320px;
                border:1px dashed black;
                margin: 20px auto;
                position: relative;
            }
            #parent div {
                width: 100px;
                height: 100px;
                background-color: yellow;
                text-align: center;
                line-height: 100px;
                margin: 5px 10px;
                position:absolute ;
            }
            div#div2{
                background-color: green;
                left: 100px;
                right: 100px;
                /*z轴的坐标，值越大，图片越在外面*/
                z-index: 500;
            }
            div#div3{
                background-color: blue;
                left: 120px;
                right: 120px;
                z-index: 900;
            }
            div#div1{
                /*相对定位:相对自己的定位*/
                /*position: relative;*/
                /*绝对定位：相对前面已经做过定位的父文本*/
                /*position: absolute;*/
                /*left: 150px;
                top: 150px;*/
                /*固定定位：无论怎么变化，位置永远不变*/
                /*position: fixed;
                right: 20px;
                bottom: 20px;*/
                position: absolute;
                left: 200px;
                right: 200px;
                z-index: 1800;
            }


        </style>
    </head>
    <body>
        <div id="parent">
            <div id="div1"></div>
            <div id="div2"></div>
            <div id="div3"></div>
        </div>
    </body>
</html>