CSS定位总结

最新推荐文章于 2024-08-14 12:22:11 发布

finyouIT

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量335

点赞数 6

分类专栏：前端三剑客文章标签： css

本文链接：https://blog.csdn.net/weixin_61485030/article/details/136222429

版权

前端三剑客专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS postion (定位)

postion属性指定了元素的定位类型

static:静态定位
relative:相对定位
absolute：绝对定位
fixed：固定定位
sticky：粘性定位

CSS中的定位

定位与布局，俩这傻傻分不清
定位是针对整个页面来讲的，俩栏布局、三栏布局，是针对页面来说
而定位是针对某个元素来讲的，把这个元素定位到什么位置

static

所谓静态定位，就是我们的标准流。
在标准流里面，块级元素独占一行，行内元素共享一行。静态定位是HTML元素的默认值，静态定位元素不会受top、bottom、left、right的影响。

relative

相对定位，就是相对原来的位置进行定位，想多定位的最大特点就是不脱离标准流，相对自己进行一定的偏移

.one{
    background-color: red;
    position: relative;
    left: 30px;
    top:20px
}

.two{
    background-color: aqua;
}

在这里插入图片描述

absolute

绝对定位，就是相对离自己最近，并且定了位的元素进行偏移，使用决定定位后的盒子会脱离标准流

.one{
    background-color: red;
    position: absolute;
    left: 30px;
    top:20px;
}

.two{
    background-color: aqua;
}

在这里插入图片描述

绝对定位后的盒子，display会变成block

span{
     position: absolute;
     width: 300px;
     height: 300px;
     background-color:black;
 }

在这里插入图片描述

默认情况下，决定定位的参考点

top:定位参考点是页面左上角，而不是浏览器的左上角

在这里插入图片描述

bottom:对应的是浏览器首屏窗口尺寸，对应大的页面左下角

在这里插入图片描述

子绝父相

.one {
    width: 500px;
    height: 500px;
    border: 10px solid red;
    padding: 20px;
    position: relative;
    .two{
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: aqua;
        padding: 20px;
    }
    .three{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: black;
    }
}