CSS：元素定位之position属性

最新推荐文章于 2023-01-25 11:56:58 发布

books1958

最新推荐文章于 2023-01-25 11:56:58 发布

阅读量810

点赞数

分类专栏： html/css/javascript 文章标签： css position

本文链接：https://blog.csdn.net/books1958/article/details/53435376

版权

html/css/javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

元素的position属性常用值有两个：
1. absolute : 设置此值后，可设置left和right的值，表示该元素在body标签中的绝对位置；
2. relative : 设置此值后，可设置left和right的值，表示该元素相对与其原本位置的距离。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-DIV布局position的使用</title>

    <style type="text/css">
        div.father {
            background-color: bisque;
            height: 200px;
        }

        div.son1, div.son1_2 {
            border: 2px dashed green;
            padding: 10px;
            position: absolute; /*设置position: absolute之后, left和right的值表示和body标签的距离*/
        }

        div.son1 {
            background-color: #56bafa;
            left: 20px;
            top: 36px;
            z-index: 2;
        }

        div.son1_2 {
            background-color: #CC00FF;
            left: 50px;
            top: 60px;
            z-index: 3;
        }

        div.son2 {
            background-color: #ff502c;
            border: 2px dashed green;
            padding: 10px;
        }

        div.son3 {
            background-color: #ff502c;
            border: 2px dashed green;
            padding: 10px;
            position: relative; /*设置position: relative, left和right的值表示和原来位置的距离(原来的位置应该刚好在son2下面)*/
            left: 10px;
            top: 20px;
        }
    </style>
</head>

<body>

<div class="father">
    <div class="son1">absolute-111</div>
    <div class="son1_2">absolute-222</div>
    <div class="son2">normal</div>
</div>

<div class="father" style="margin-top: 20px">
    <div class="son2">normal</div>
    <div class="son3">relative</div>
</div>

</body>
</html>

效果图：
这里写图片描述

books1958

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：元素定位之position属性

position属性常用值有两个： 1. absolute : 设置此值后，可设置left和right的值，表示该元素在body标签中的绝对位置； 2. relative : 设置此值后，可设置left和right的值，表示该元素相对与其原本位置的距离。
复制链接

扫一扫

专栏目录