复习-css元素定位

最新推荐文章于 2025-04-09 09:35:12 发布

Marshal Zheng

最新推荐文章于 2025-04-09 09:35:12 发布

阅读量118

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/zysps1/article/details/87910570

版权

前端专栏收录该内容

4 篇文章

订阅专栏

复习-css元素定位

css元素定位

<style type="text/css">
body{
    margin: 15px;
    font-family: "Adobe 宋体 Std L";
    font-size:12px;
}
.father{
    background-color: black;
    border: 1px solid #111111;
    padding: 25px;
}
.son{
    padding: 10px;
    margin:5px;
    background-color: aliceblue;
    border:1px dashed;
    float:left;
}
.son2{
    padding: 5px;
    margin: 0px;
    background-color: #111111;
    border:1px dashed #111111;
}
</style>


<style type="text/css">
body{
    margin: 5px;
    font-family: "Adobe 宋体 Std L";
    font-size: 13px;
}
.block1{
    padding-left:10px;<!--列距--> 
    margin-right:10px;
    float:left;<!--浮动在左边上层-->
}
.h3{
    background-color: aliceblue;;
    border: 1px dashed #233333;
    clear:left;<!--清除浮动-->
}
</style>


<style type="text/css">
#block{
    background-color: ];
    border:1px dashed #000000;
    padding: 10px;
    position:absolute;<!--绝对定位，脱离了父标签-->
    <!--position:relative<!--相对于自身原来的距离，在父块-->
    left:20px;<!--相对于页面body的距离-->
    top:40px;
}
</style>


<body>
<div id = "father">
    <div id = "block">absolute</div>
    <div id = "block1">relative</div>
</div>
</body>

z-index调整定位时重叠块的上下而为之，当块设置了position属性时，该值便可设置各块之间的重叠高低关系，默认值为0

<style type="text/css">
#block1{
    ... position: absolute;
    left: 20px;
    top:20px;
    z-index: 1;<!--高低值-->
}
#block2{
    ... position: absolute;
    left:10px;
    top:23px;
    z-index: 0;<!--高低值0-->
}
</style>

posted @ 2018-04-02 11:09 Edge_of_Eternity 阅读(...) 评论(...) 编辑收藏