前端 | CSS 定位属性position的用法

前端 | `CSS` 定位属性`position`的用法

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_POSITION</title>
    <style type="text/css">
        .div1 {
            width: 360px;
            height: 360px;
            border: 1px solid black ;
        }

        .div1_1 {
            width: 180px;
            height: 180px;
            background-color:burlywood ;
        }

        .div1_2 {
            width: 180px;
            height: 180px;
            background-color:aquamarine;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div1_1">div11</div>
    <div class="div1_2">div12</div>
</div>
</body>
</html>

static 静态定位

默认的position值是static

忽略top，right，bottom，left，z-index属性的设置

css 复制代码

        .div1 {
            position: static;
            width: 360px;
            height: 360px;
            border: 1px solid black ;
        }

        .div1_1 {
            width: 180px;
            height: 180px;
            background-color:burlywood ;
        }

        .div1_2 {
            width: 180px;
            height: 180px;
            background-color:aquamarine;
        }

relative 相对定位

相对于元素正常位置（static）进行的定位

可以使用top、right、bottom、left属性来调整元素的位置

1 `relative`修改`div1`

div11与div12的高度和与div1一致，宽度为div1的一半

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black ;
    position: relative;
    top:100px;
}

div1包含div11与div12，由于div1整体高度偏移了，看上去整体偏移了

2 `relative`修改`div11`

div1还原，仅修改div11

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: relative;
    left: 180px;
}

修改div12与div11的相对定位一致

3 `relative`修改`div1`和`div11`

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black ;
    position: relative;
    top:100px;
}
.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: relative;
    left: 180px;
}

absolute 绝对定位

不存在父元素，元素将以浏览器窗口为基准进行定位

存在父元素，元素将以父元素为基准进行定位

可以使用top、right、bottom、left属性来调整元素的位置

1 `absolute`设置`div1`

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    position: absolute;
    top: 100px;
}

与relative还是不相同的

2 `absolute`设置`div12`

css 复制代码

.div1_2 {
    width: 180px;
    height: 180px;
    background-color: orange;
    position: absolute;
    /* left: 180px; */
}

先不设置left值时，与relative是一致的，也就是按照布局展开的

由于没有删除body中margin与padding的宽度，固有以下影响

再次将div12的left设置为180px将出现空隙

受到body { padding: '8px' }与 .div1 { border: 1px solid black; }的影响，应该修改为180px + 8px + 1px用以对齐

修改div11与div12的绝对定位一致

3 `absolute`设置`div11`

div11初步设置absolute，将使得div12隐藏到div11的下方，通过以下两图说明是隐藏的

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: absolute;
}

css 复制代码

.div1_2 {
    width: 200px;
    height: 200px;
    background-color: orange;
}

重置div12，调整div11

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: absolute;
    left: 189px;
    top: 189px;
}

fixed 固定定位

以浏览器窗口为基准的定位

可以使用top、right、bottom、left属性来调整元素的位置

1 `fixed`设置`div1`

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    position: fixed;
    top: 100px;
}

div1已经超出了body的空间，以浏览器窗口 为基准，距离顶部100px

2 `fixed`设置`div11`

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: fixed;
    left: 189px;
    top: 189px;
}

与absolution不一致，absolution则是相对父元素 进行的处理，而fixed是相对浏览器窗口

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: fixed;
    left: 189px;
    top: 289px;
}

将top: 289px，发现内容超过div1高度，原因是fixed布局不受body影响，实际高度180px + 100px + 1px

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: fixed;
    left: 189px;
    top: 281px;
}

sticky 粘性定位

元素在超过特定值前为相对定位（relative），之后为固定定位（fixed）

可以使用top、right、bottom、left属性来调整元素的位置

1 `sticky`设置`div1`

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    position: sticky;
    top: 100px;
    left: 206px;
}

无论如何调整top大小没有作用，需要设置body的高度

调整left大小，小于206px是相对定位 ，大于206px是固定定位。
- 206px是560px - 362px + 8px

left等于206px

left小于206px

left大于206px

2 `sticky`设置`div1.top`

css 复制代码

body {
    height: '400px';
}

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    position: sticky;
    top: 100px;
    left: 206px;
}

高度配置，需要掌握父元素 的高度，超过父元素 高度才有用，限制父元素高度为400px
- div1元素高度为362px，小于46px=400px - 362px + 8px是相对定位，大于46px是固定定位

top小于46px，是相对定位，

top大于46px

由于div1的父元素是body，也就是浏览器窗体，是不容易判断是相对定位还是固定定位的

3 `sticky`设置`div11.top`

div1设置为相对定位，top: 100px

css 复制代码

.div1 {
    width: 360px;
    height: 360px;
    border: 1px solid black;
    position: relative;
    top: 100px;
}

按照上述减法计算临界362px - 1px - 180px + 8px + 100px
- div1总高度362px，上下边框总共占2px ，div11在div1内部，临界值为360px - 180px
- div1外层还有内容，所以要加上div1 上边框，div1 相对高度，body margin，最终临界值为 360px - 180px + 1px + 100px + 8px = 289px

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px px;
    background-color: cyan;
    position: sticky;
    top: 289px;
}

top小于289px
- 228px是一个特殊位置，计算公式228px = 408px - 180px

css 复制代码

.div1_1 {
    width: 180px;
    height: 180px;
    background-color: cyan;
    position: sticky;
    top: 228px;
}

top大于289px

前端 | CSS 定位属性position的用法

前端 | CSS 定位属性position的用法

1 relative修改div1

2 relative修改div11

3 relative修改div1和div11

1 absolute设置div1

2 absolute设置div12

3 absolute设置div11

1 fixed设置div1

2 fixed设置div11

1 sticky设置div1

2 sticky设置div1.top

3 sticky设置div11.top

前端 | `CSS` 定位属性`position`的用法

1 `relative`修改`div1`

2 `relative`修改`div11`

3 `relative`修改`div1`和`div11`

1 `absolute`设置`div1`

2 `absolute`设置`div12`

3 `absolute`设置`div11`

1 `fixed`设置`div1`

2 `fixed`设置`div11`

1 `sticky`设置`div1`

2 `sticky`设置`div1.top`

3 `sticky`设置`div11.top`