heml5第七课时，相对定位

最新推荐文章于 2018-12-04 18:11:39 发布

甲戌天火

最新推荐文章于 2018-12-04 18:11:39 发布

阅读量290

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/71046424

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相对定位relative</title>
    <style>
        #parent{
            width: 700px;
            height: 200px;
            background-color: rosybrown;
        }
        #child1,#child2,#child3{
            float: left;
        }
        #child1{
            width: 200px;
            height: 200px;
            background-color: #4d2e83;
        }
        #child2{
            width: 200px;
            background-color: #585858;
            height: 200px;
            position: relative;
            /*写了relative(相对定位)，top和left和right和bottom才可以用*/
            top: 100px;
            left: 30px;
            z-index: -1;/*调整div的先后级，谁在上，谁在下！绝对定位用的比较多。*/
        }
        #child3{
            width: 200px;
            height: 200px;
            background-color: #ff6600;
        }
    </style>
</head>
<!--采用相对定位的元素，会相对于它原来的位置进行定位，
    并且元素原始占用的空间不会被其他元素占用，即原本child2的位置，不会被child3占用-->
<body>
<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
    <div id="child3"></div>
</div>
</body>
</html>

甲戌天火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
heml5第七课时，相对定位

html>html>head lang="en"> meta charset="UTF-8"> title>相对定位relativetitle> style> #parent{ width: 700px; height: 200px; background-color: rosybr
复制链接

扫一扫

专栏目录