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

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

<!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属性的设置

        .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的一半

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

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

2 relative修改div11

• div1还原，仅修改div11

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

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

3 relative修改div1和div11

.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

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

• 与relative还是不相同的

2 absolute设置div12

.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的下方，通过以下两图说明是隐藏的

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

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

• 重置div12，调整div11

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

fixed 固定定位

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

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

1 fixed设置div1

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

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

2 fixed设置div11

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

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

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

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

.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

.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

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

.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

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

• top小于289px

  • 228px是一个特殊位置，计算公式228px = 408px - 180px

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

• top大于289px