elsfs cloud 文档

Appearance

CSS属性：定位属性 ​

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。

css
position: absolute;  <!-- 绝对定位 -->

position: relative;  <!-- 相对定位 -->

position: fixed;     <!-- 固定定位 -->

下面逐一介绍。

相对定位 ​

相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。

我们之前学习的背景属性中，是通过如下格式：

css
background-position:向右偏移量 向下偏移量;

但这回的定位属性，是通过如下格式：

css
position: relative;
left: 50px;
top: 50px;

相对定位的举例：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        .div2{
            position: relative;  /*相对定位：相对于自己原来的位置*/
            left: 50px;  /*横坐标：正值表示向右偏移，负值表示向左偏移*/
            top: 50px;   /*纵坐标：正值表示向下偏移，负值表示向上偏移*/

            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

上方代码中，我们给div2设置了相对定位，让其向右下方偏移。注意，偏移是相对于自己原来的位置进行偏移。

相对定位的特点：

  • 不脱离标准文档流
  • 相对于自己原来的位置进行偏移
  • 原来的位置继续占有空间
  • 可以通过left、top、right、bottom进行偏移
  • 层级提高了，可以覆盖其他标准流中的元素

绝对定位 ​

绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。

格式举例如下：

css
position: absolute;  /*绝对定位*/
left: 10px;  /*横坐标*/
top/bottom: 20px;  /*纵坐标*/

绝对定位的参考点 ​

绝对定位的参考点，如下：

  1. 如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角：
css
position: absolute;
left: 10px;  /*横坐标：距离页面左边框10px*/
top: 20px;   /*纵坐标：距离页面上边框20px*/
  1. 如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解"首屏"二字），对应的页面的左下角：
css
position: absolute;
left: 10px;    /*横坐标：距离页面左边框10px*/
bottom: 20px;  /*纵坐标：距离页面下边框20px*/

以盒子为参考点 ​

一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。

如果一个盒子既没有设置width，也没有设置left和right，那么，这个盒子的宽度，就是内容的宽度（auto）。

绝对定位的盒子居中 ​

我们知道，标准流中的盒子居中的格式是：

css
margin: 0 auto;

但是，对于绝对定位的盒子，margin: 0 auto;无效。

如果想让绝对定位的盒子居中，可以这样做：

css
position: absolute;
left: 50%;   /* 让盒子的左边线居中 */
margin-left: -100px;  /* 然后向左移动自身宽度的一半 */

例如，我们现在要让一个宽度为200px的盒子在屏幕中居中，可以这样设置：

css
.box {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background-color: green;
}

绝对定位的特点 ​

绝对定位的特点：

  • 脱离标准文档流
  • 如果没有设置宽度，宽度由内容决定
  • 如果没有设置left和right，默认位置在原来的位置
  • 层级提高了，可以覆盖其他标准流中的元素
  • 不会继承父元素的宽度

固定定位 ​

固定定位：就是相对于浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

格式举例如下：

css
position: fixed;
left: 100px;
top: 100px;

固定定位的特点：

  • 脱离标准文档流
  • 相对于浏览器窗口进行定位
  • 无论页面如何滚动，盒子位置不变
  • 层级提高了，可以覆盖其他标准流中的元素

网页的五层结构 ​

我们的网页就是一个五层结构：

  1. 内容层：z-index：auto/0
  2. 背景层：z-index：-1
  3. 浮动层：z-index：auto/0
  4. 定位层：z-index：auto/0/1/2/...
  5. 最高层：z-index：9999

z-index属性：调整层级 ​

z-index属性用于调整定位元素的层级，值越大层级越高。

css
z-index: 1;

需要注意的是：

  • z-index的默认值是0
  • z-index只能用于定位元素（position不为static的元素）
  • 如果父元素的层级低于其他元素，那么子元素的层级再高也没用

定位属性的综合应用 ​

1. 固定导航栏 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        
        .content {
            margin-top: 50px;
            height: 2000px;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="nav">固定导航栏</div>
    <div class="content">内容区域</div>
</body>
</html>

2. 水平垂直居中 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #f5f5f5;
        }
        
        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

3. 遮罩层 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩层</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
            width: 400px;
            height: 300px;
            background-color: #fff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div class="modal"></div>
</body>
</html>

总结 ​

CSS的定位属性是布局中非常重要的一部分，它可以让元素脱离标准流，实现更加灵活的布局。

三种定位方式的特点：

  1. 相对定位（relative）：

    • 不脱离标准流
    • 相对于自己原来的位置进行偏移
    • 原来的位置继续占有空间

  2. 绝对定位（absolute）：

    • 脱离标准流
    • 如果父辈元素中有已定位的元素，则以父辈已定位元素为参考点
    • 如果父辈元素中没有已定位的元素，则以页面为参考点

  3. 固定定位（fixed）：

    • 脱离标准流
    • 相对于浏览器窗口进行定位
    • 无论页面如何滚动，盒子位置不变

在实际开发中，我们通常会结合这三种定位方式，实现各种复杂的布局效果。

版权声明

本文档采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 (CC BY-NC-SA 4.0) 进行许可。