前端CSS中position（定位样式）中有3个方法fixed，relative，absolute

最新推荐文章于 2024-08-03 17:33:50 发布

weixin_41987434

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量879

点赞数

分类专栏：前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_41987434/article/details/125353130

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS样式：position（定位样式）
position中有3个方法：
1.fixed (固定在窗口的某个位置)
2.relative
3.absolute
举例如下：
1.fixed (固定在窗口的某个位置)

        .back{
            position: fixed;   #固定一个位置
            width: 60px;   #该固定物大小，宽度60px
            height: 60px;	#该固定物大小，高度60px
            border: 1px solid red;   #加一个1px边框，红色的

            right: 10px;   #该固定物离右边10px
            bottom: 60px;   #该固定物离底部边60px
        } 

<div class="back"></div>

.dialog{
    position: fixed;
    width: 500px;
    height: 300px;
    background-color: black;

    left: 50%;   #离左边一半距离，但是没有考虑自身区域大小，接着看如下-250px
    margin-left: -250px;  #区域为500px，已经如上代码离左边50%距离，但是需要在往回退一半距离才行
    top: 200px;  #高度没办法百分比


#下面这个也可以配合fixed做到左右居中显示
    left: 0;
    right: 0;
    margin: 0 auto;

    top: 200px;		

}

2.relative和absolute

 <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin: 100px;

            position: relative;  #外部框用
        }
        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: green;

            position: absolute;   #内部框用
            right: 0;  #靠近右边边距0像素
            top: 0;		#靠上边边距0像素
        }
    </style>
</head>
<body>
<div class="c1">   #外部标签
    <div class="c2"></div>   #内部标签
</div>
</body>