css基础-position定位

static静态定位
类似于标准流
relative相对定位
元素移动位置参照原来位置来移动的
保留原来的位置（人走了，位置留着，停职留薪），不脱标
absolute绝对定位
元素移动位置参照父元素
如果父元素和父父级等无定位，则以浏览器位置偏移
如果父元素有定位，则以父元素为参照进行偏移
如果父元素无定位，父父级（爷爷）元素有定位，则以父父级（爷爷）元素为参照进行偏移
不占用原先位置，脱标
常用：子绝对定位，父亲相对定位
fixed固定可视区位置
以浏览器可视窗口为参照物
不占用原先位置，脱标
sticky粘性定位

元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block（最近块级祖先 nearest block-level ancestor），
注意，一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时），即便这个祖先不是最近的真实可滚动祖先。这有效地抑制了任何“sticky”行为

　　例子1：固定定位例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="ad-left">ad left</div>

    <div class="content">
        content<br>
        2023.7.22
        <br>

    </div>
    <div class="close">X</div>
    <div class="ad-right">ad right</div>
</body>

</html>

<style>
    .content {
        margin: 0 auto;
        background-color: aqua;
        width: 50%;
        height: 2000px;
    }

    .close {
        position: fixed;
        left: 75%;
        top: 200px;
        width: 100px;
        height: 100px;
        background: #9ef;
    }

    .ad-left {
        position: fixed;
        left: 0;
        top: 0;
        width: 100px;
        height: 200px;
        background-color: pink;

    }

    .ad-right {
        position: fixed;
        top: 0;
        right: 0;
        background-color: pink;
        width: 100px;
        height: 200px;
    }
</style>

例子2：sticky定位例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="day">
            <div class="dayInfo">SAT 2023/7/22</div>
            <div class="cardInfo">
                <div>card1</div>
                <div>card2</div>
                <div>card3</div>
                <div>card4</div>
            </div>
        </div>
        <div class="day">
            <div class="dayInfo">SUN 2023/7/23</div>
            <div class="cardInfo">
                <div>card1</div>
                <div>card2</div>
                <div>card3</div>
                <div>card4</div>
            </div>
        </div>
        <div class="day">
            <div class="dayInfo">MON 2023/7/24</div>
            <div class="cardInfo">
                <div>card1</div>
                <div>card2</div>
                <div>card3</div>
                <div>card4</div>
            </div>
        </div>
        <div class="day">
            <div class="dayInfo">TUE 2023/7/25</div>
            <div class="cardInfo">
                <div>card1</div>
                <div>card2</div>
                <div>card3</div>
                <div>card4</div>
            </div>
        </div>
        <div class="day">
            <div class="dayInfo">WED 2023/7/26</div>
            <div class="cardInfo">
                <div>card1</div>
                <div>card2</div>
                <div>card3</div>
                <div>card4</div>
            </div>
        </div>
    </div>
    <div class="footer">footer</div>

</body>

</html>

<style>
    body {
        margin: 0;
    }

    .header {
        height: 80px;

    }

    .header,
    .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        margin: 0 auto;
        background-color: cadetblue;
    }

    .footer {

        height: 60px;
    }

    .container {
        margin: 0 auto;
        width: 50%;
        height: 500px;
        overflow: auto;
    }

    .day {
        /* position: relative; */
    }

    .dayInfo {
        position: sticky;
        top: 0px;
        background-color: blue;
        color: #fff;
    }

    .cardInfo div {
        width: calc(50% - 20px);
        display: inline-block;
        height: 100px;
        float: left;
        background-color: azure;
        margin: 10px;
        box-sizing: border-box;
    }

    .cardInfo::after {
        content: '';
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
</style>

　　　　总结：定位的重点确定定位的方式，第一是否脱离标准流（是否点位），第二以谁为基础移动位置，定位是我们平时前端开发中非常常用的属性，必须掌握以灵活运用

posted on 2023-07-21 23:14 码农-编程小子阅读(11) 评论(0) 编辑收藏举报

刷新页面返回顶部