css定位

最新推荐文章于 2024-07-07 17:22:42 发布

黄昏终结者

最新推荐文章于 2024-07-07 17:22:42 发布

阅读量592

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_62181310/article/details/123986761

版权

一、常见的布局方式

1.标准流:

块级元素独占一行,垂直布局

2.浮动:

让块级元素水平布局

3.定位:

可以在网页页面中任意摆放

定位后层叠在其他盒子上面

二、定位

属性名:position

属性值:

static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

偏移值:

水平方向	left	数字+px	距离左边的距离
水平方向	right	数字+px	距离右边的距离
垂直方向	top	数字+px	距离上边的距离
垂直方向	bottom	数字+px	距离下边的距离

2.1静态定位

属性:position: static;

静态定位的元素是默认值,不脱标,跟标准流一样,不能使用方位值进行移动

.box {
    position: static;
    left: 500px;
    top: 500px;
    width: 200px;
    height: 200px;
    background-color: #ccc;
}

2.2相对定位

属性:position: relative;

相对定位的元素不脱标,还占据原来的位置,位置偏移参考自身的位置进行移动

        .red {
            position: relative;
            right: 50px;
            bottom: 50px;
            background-color: red;
        }

2.3绝对定位

属性:position: absolute;

绝对定位的元素脱标,不占据原来的位置,绝对定位的父元素都没有使用定位,自身位置移动参考浏览器,父元素有定位,自身位置移动参考离最近的使用了定位父元素

        .fu {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: #ccc;
            margin: 0 auto;
        }
        .zi {
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: red;
        }

2.4固定定位

属性:position: absolute;

固定定位将元素固定在页面的某个位置,不会随着滚动条滚动

固定定位元素脱标,不占据原来的位置
自身位置移动参考浏览器可视窗口

        .box {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 100px;
            height: 30px;
            background-color: rgba(255,0,0,.3);
        }