CSS_之绝对相对定位

时间 2019-12-07

标签 css 绝对相对定位栏目 CSS 繁體版

原文原文链接

练习

完成如图所示案例css

Html页面具体实现
<Html>
<head>
<stylen type="text/css">

</style>
</head>

<body>
//最外边的边框
<div class="div0">
<div class="div1">
<div class="div2">5</div>
<img  class=“img”src="img/shopping.jpg">
</div>
</div>
</body>
</Html>
复制代码

CSS样式显示bash

.div{
    width:500px;
    height:500px;
    //父类用的定位是相对定位
    position:relative;
    background-color:#` 667766;
    top:150px;
    left:300px;
}
.img{
    width:25px;
    height:25px;
    //子类用绝对定位
    position:absolute;
    bottom:0px;
    left:270px;
}
.div1{
    width:300px;
    height:200px;
    background-color:red;
    position:absolute;
    top:50px;
    left:100px;
}
.div2{
    width:30px;
    height:20px;
    border-radius:30px/20px;
    background-color:blue;
    color：white;
    text-align:center;
    position:absolute;
    top:-5px;
    left:-5px;
    line-height:20px;
}
复制代码

总结：在于父div用相对定位，子div用绝对定位，即可以完成案例ui