CSS学习之三定位属性

最新推荐文章于 2022-07-06 14:55:46 发布

剑宗高手

最新推荐文章于 2022-07-06 14:55:46 发布

阅读量259

点赞数

本文链接：https://blog.csdn.net/xuzhen0913/article/details/53780747

版权

使用定位方式属性可以控制浏览器如何定位HTML元素

语法:

position:

static 默认

absolute 绝对定位 left right top bottom

fixed 页面滚动时，元素不随着滚动

relative 采用相对定位，对象不可层叠

层叠顺序z-index

使用层叠顺序可以设置层的先后顺序和覆盖关系。默认情况下，z-index值为1，位于最底层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .d{
            position: absolute;
            top: 25px;
            right: 20px;
            left: 25px;
            bottom: 20px;
            z-index: 1;
        }
        .d1{
            font-size: 12px;
            position: absolute;
            top: 30px;
            right: 20px;
            left: 10px;
            bottom: 25px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div>
        <img class="d" src="./images/baidu.jpg" width=140 height=150>
    </div>
    <div class="d1">
        可爱讨喜的卡通文具，爱不释手的动漫饰品。
    </div>

</body>
</html>