超级详细的css的position属性

时间:2020-6-28 作者:admin


超级详细的cssposition属性

  1. position: static

CSS定位中的默认值。当元素不设定任何position属性时,默认用static,表示没有定位,元素出现在正常的流中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position:static</title>
</head>
<style>
    body{
        margin-left: 200px;
        text-align: center;

    }
    .first {
        width: 400px;
        height: 400px;
        background-color: #c6f3e4;
    }
    .second{
        width: 200px;
        height: 200px;
        background-color: #f7ccd3;
        position: static;
        left: 50px;
        top: 100px;
    }
    .third{
        width: 100px;
        height: 100px;
        background-color: orangered;
    }

</style>
<body>
    <div class="first">盒子一</div>
    <div class="second">盒子二</div>
    <div class="third">盒子三</div>
</body>
</html>

超级详细的css的position属性

  1. position:relative

相对定位 相对于正常流中的本身正常位置来进行定位,属于标准流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position:relative</title>
</head>
<style>
    body{
        margin-left: 200px;
        text-align: center;

    }
    .first {
        width: 400px;
        height: 400px;
        background-color: #c6f3e4;
    }
    .second{
        width: 200px;
        height: 200px;
        background-color: #f7ccd3;
        position: relative;
        left: 50px;
        top: 100px;
        opacity: 0.2;
    }
    .third{
        width: 100px;
        height: 100px;
        background-color: orangered;
    }

</style>
<body>
    <div class="first">盒子一</div>
    <div class="second">盒子二</div>
    <div class="third">盒子三</div>
</body>
</html>

设置定位前:
超级详细的css的position属性
设置定位后:
超级详细的css的position属性

  1. position:absolute

生成绝对定位的元素,其相对于 static 定位以外的第一个父元素进行定位,会脱离正常流,如果元素的父级没有设置定位属性,则依据 body 元素左上角作为参考进行定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position:absolute</title>
</head>
<style>
    body{
        margin-left: 200px;
    }
    .first {
        width: 400px;
        height: 400px;
        background-color: #c6f3e4;
        text-align: center;
    }
    .second{
        width: 200px;
        height: 200px;
        background-color: #f7ccd3;
        text-align: center;
        position: absolute;
        left: 300px;
        top: 200px;
    }
    .third-father{
        margin-top: 40px;
        width: 150px;
        height: 150px;
        border: 3px solid #95dfec;
        position: relative;
    }
    .third{
        width: 100px;
        height: 100px;
        border: 3px solid #f0c87d;
        position: absolute;
        left: 30px;
        top: -10px;
    }

</style>
<body>
    <div class="first">盒子一</div>
    <div class="second">盒子二</div>
    <div class="third-father">
        <div class="third">盒子三</div>
    </div>
</body>
</html>

上面描述的两种情况如下:
超级详细的css的position属性

  1. position:fixed

fixed相对于浏览器窗口定位,滚动浏览器窗口并不会使其移动,会脱离正常流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position:fixed</title>
</head>
<style>
    body{
        margin-left: 200px;
        text-align: center;

    }
    .second{
        width: 200px;
        height: 200px;
        background-color: #f7ccd3;
    }
    .third{
        width: 100px;
        height: 100px;
        background-color: orangered;
        border-radius: 50%;
        position: fixed;
        bottom: 50px;
        left: 50px;
    }
    .test-fixed {
        width: 200px;
        height: 200px;
        background-color: plum;
        margin-top: 10px;
    }

</style>
<body>
    <div class="second"></div>
    <div class="third"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
</body>
</html>

只是设置了定位:
超级详细的css的position属性
设置了定位和left/bottom
超级详细的css的position属性
设置好后滚动页面:
超级详细的css的position属性

  1. position:sticky

可以实现吸顶效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position:sticky</title>
</head>
<style>
    body{
        margin: 0px 0px 0px 200px;
        text-align: center;

    }
    .second{
        width: 200px;
        height: 200px;
        background-color: #f7ccd3;
    }
    .third{
        width: 200px;
        height: 50px;
        background-color: orangered;
        position: sticky;
        top: 50px;
    }
    .test-fixed {
        width: 200px;
        height: 200px;
        background-color: plum;
        margin-top: 10px;
    }

</style>
<body>
    <!-- <div class="first">盒子一</div> -->
    <div class="second"></div>
    <div class="third"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
    <div class="test-fixed"></div>
</body>
</html>

刚刚设置好定位:
超级详细的css的position属性
滚动页面,当定位的元素离顶部为50px时候,位置固定,变成于fixed定位相同的效果:
超级详细的css的position属性
position:sticky各个浏览器支持情况不同,常用的浏览器大致如下:
超级详细的css的position属性

最后敲黑板划重点来啦:

是否标准流 相对谁定位
position:static 默认值,没有定位
position:relative 相对于正常流中的自身正常位置
position:absolute 非static 定位以外的第一个父元素进行定位,没有父级定位元素就相对body定位
position:fixed 相对浏览器定位
position:sticky 忽略 相对浏览器定位
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。