第六周相对布局与绝对布局

最新推荐文章于 2019-10-18 07:55:11 发布

snail131

最新推荐文章于 2019-10-18 07:55:11 发布

阅读量236

点赞数

本文链接：https://blog.csdn.net/qq_36807080/article/details/70943657

版权

1.相对布局

position: relative;

相对定位是行对于原来的位子，当div用相对定位移走后，原来的位置还会保留，不会被其他div占据

    <style>
        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: darkturquoise;
            position: relative;
            top: 20px;
            left: 20px;
        }
        #right{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
    <title>相对定位</title>
    <!-- 相对定位是相对于原来的位置，
    原来的位置还会保留-->
</head>
<body>
<div>
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
</body>

2.绝对定位

采用绝对定位的元素，寻找离他最近的使用了定位的父元素，并以它的坐标进行定位，

如果所有的父元素都没有使用定位，则以body为坐标进行定位，并且，元素原来占用

的空间会被其他元素占用，

小技巧在使用绝对定位时，一般在在外面的盒子div中设置一个相对定位，以这

个为参考坐标点，相对定位会保留这个位置，对全局没什么影响

    <style>
        #left,#center,#right{
            float: left;
        }
        #left{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #center{
            width: 200px;
            height: 200px;
            background-color: darkturquoise;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        #right{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
    <title>绝对定位</title>
    <!--采用绝对定位的元素，会寻找离他最近的使用了定位
    的父元素，并以它的坐标进行定位，
    如果所有的父元素都没有使用定位，则以body为坐标进行
    定位，并且，元素原来占用的空间会被其他元素占用
  -->
</head>
<body>
<div style="position: relative ;top: 100px;left: 100px">
    <div>
        <div>
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
    </div>
</div>

</body>

snail131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六周相对布局与绝对布局

1.相对布局position: relative; 相对定位是行对于原来的位子，当div用相对定位移走后，原来的位置还会保留，不会被其他div占据 style> #left,#center,#right{ float: left; } #left{ wid
复制链接

扫一扫