前端知识小结-CSS定位(position)的分类及用法

在复习的过程中总结了一些知识点,在以后会陆续分享给大家,有不对的地方也请大家指正!!!

CSS定位分类及用法

1.默认定位

position:static

在不写的情况下默认为默认定位

2.绝对定位

position:absoluted

相对于最近的父元素定位,定位后空间释放

3.相对定位

position:relative 

相对于自己定位,定位后空间不释放

4.固定定位

position:fixed

相对于浏览器定位,定位后空间释放

5.吸顶定位

position:sticky 

空间释放
以下附上吸顶定位代码测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body {
            height: 2000px;
            background: #63a35c;
        }
        #div1{
            position: sticky;
            left: 100px;
            top: 0px;
            background: red;
            width: 200px;
        }
    </style>
</head>
<body>
adqwdqdqdq
<div id="div1">
dgasgasfas

</div>
</body>
</html>

欢迎大家提出各种意见,定位是我们在css学习中很重要的一部分知识,在项目中会经常用到,在找工作面试时也是考官经常问的问题,希望本文对大家的学习有所帮助!!!

猜你喜欢

转载自blog.csdn.net/weixin_43371610/article/details/85246847