HTML5基础——15、CSS定位

最新推荐文章于 2025-11-25 13:59:03 发布

原创最新推荐文章于 2025-11-25 13:59:03 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #前端 #定位布局 #定位

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。继续学习H5。
之前已经学习了标准流布局和浮动布局，接下来学习一下定位布局。

一、定位的作用

之前学习的浮动，作用是让多个块级盒子可以在一行里面显示，并且可以往左或者往右对齐。
而定位的作用，是可以让某个盒子的某个范围或者屏幕上定位，并且可以压住其他的盒子。

二、定位的组成

定位的组成：

定位=定位模式+边偏移。

所以在指定定位的时候，要先通过position属性指定是哪种定位，然后再通过top、left、right、bottom来指定边的偏移。
定位的模式：

1. 静态定位

默认的定位方式，也就是没有定位。

2. 相对定位

相对于元素原来的位置来定位。
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #title {
      width: 600px;
      height: 50px;
      background-color: yellow;
      margin: 0 auto;
      text-align: center;
      line-height: 50px;
    }

    #container1 {
      background-color: yellow;
      width: 600px;
      margin: 0 auto;
    }

    #container1:before,
    #container1:after {
      content: "";
      display: block;
    }

    #container1:after {
      clear: both;
    }

    #container1 {
      zoom: 1;
    }

    #container2 {
      background-color: rgba(0, 0, 0, 0.1);
      width: 600px;
      margin: 0 auto;
    }

    .box {
      width: 100px;
      height: 100px;
    }

    #box1 {
      background-color: red;
      width: 40%;
      height: 100px;
      float: left;
    }

    #box2 {
      background-color: blue;
      width: 60%;
      height: 150px;
      float: right;
    }

    #pos {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div id="title">这是标题</div>
  <div id="container1">
    <div id="box1" class="box">左边内容</div>
    <div id="box2" class="box">右边内容</div>

  </div>
  <div id="container2">
    <div id="pos">定位</div>
  </div>
</body>

显示：
在这里插入图片描述

接下来通过相对定位，让定位的粉色小盒子移动位置：

#pos {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 0 auto;
  position: relative;
  top: -20px;
  left: -40px;
}

加上了position: relative;说明了这个pos盒子是相对定位，然后通过top和left来指定位置。现在的显示是：
在这里插入图片描述

可以看到，pos盒子在相对于它自己原来的位置向上偏移了20像素，向左偏移了40像素。
需要注意的是，相对定位并不会放弃之前占有的位置：
在这里插入图片描述

假如有三个div本来是按照标准流布局每个一行的，然后中间的div相对定位了，那么它实际的位置变化了，但之前占有的位置还是保留的。

3. 绝对定位

相对于它的最近一级祖先级来定位，如果祖先元素没有定位，则以整个浏览器(Document文档)来定位。
还是刚才那个例子，假如把pos盒子改成绝对定位：

#pos {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 0 auto;
  position: absolute;
  top: 20px;
  left: 40px;
}

这时候会看到
在这里插入图片描述

由于pos的所有父级都没有使用定位，所以它现在是相对于整个浏览器文档页面的定位。假如把页面拉宽一点，由于中间的元素都是居中对齐的，但pos是相对整个页面的位置，所以pos的位置离中间元素更远了。
在这里插入图片描述

接下来，把pos的父级container2改成相对定位：

#container2 {
  background-color: rgba(0, 0, 0, 0.1);
  width: 600px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}

这时候页面会变成了：
在这里插入图片描述

所以，我们是可以通过指定父级的定位，然后子级用绝对定位来相对父级位置来定位的。
这个做法一般称为子绝父相。意思是，当子元素使用绝对定位的时候，父级一般会使用相对定位。

4. 固定定位

相对于浏览器的可视范围来定位，在浏览器页面滚动的时候，元素也不会改变位置。
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container1 {
      background-color: yellow;
      border: 1px solid black;
      width: 600px;
      height: 200px;
      margin: 0 auto;
    }

    #pos {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
      position: fixed;
      top: 20px;
      left: 40px;
    }
  </style>
</head>

<body>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="pos">定位</div>
</body>

显示：
在这里插入图片描述

由于pos的定位是固定定位，也就是固定在浏览器可视范围内的一个位置，所以当页面向下滚动的时候，它还是固定在屏幕的左上角。

5. 粘性定位

这是一个比较奇怪的定位方法，它也是相对于整个页面的位置的，但它的初始位置却是自己原来在标准流时的位置。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container1 {
      background-color: yellow;
      border: 1px solid black;
      width: 600px;
      height: 200px;
      margin: 0 auto;
    }

    #pos {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin: 0 auto;
      position: sticky;
      top: 20px;
    }
  </style>
</head>

<body>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="pos">定位</div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
  <div id="container1"></div>
</body>

显示：

在这里插入图片描述

pos会占有标准流定位的原来位置，但在滚动页面的时候：
在这里插入图片描述

当它到达了指定的位置，比如我这里指定了top:20px，也就是离顶部20像素的位置，它就不继续滚动了，会一直停留在这个位置。
有些网站的一些固定不跟随页面滚动的广告，就是使用这种粘性定位制作的，不过sticky粘性定位对浏览器的兼容性比较差，很多浏览器不支持，所以要谨慎使用。

三、定位的重叠问题

上面提到过，定位是会完全压住下面的元素的，那么当两个定位的元素互相重叠时，谁盖住谁呢？
例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
    }

    #pos1 {
      background-color: pink;
      margin: 0 auto;
      position: relative;
      top: 20px;
    }

    #pos2 {
      background-color: red;
      margin: 0 auto;
      position: relative;
      top: -20px;
    }
  </style>
</head>

<body>
  <div id="pos1" class="box">定位1</div>
  <div id="pos2" class="box">定位2</div>
</body>

显示：
在这里插入图片描述

如果正常情况下，后面的会盖住前面的。
我们也可以通过z-index来调节层叠的高度。默认z-index的值是0，值越大就越在上面，比如把上面的例子的pos1改一下：

#pos1 {
  background-color: pink;
  margin: 0 auto;
  position: relative;
  top: 20px;
  z-index: 1;
}

这时候pos1的z-index比较大，所以会盖住pos2：
在这里插入图片描述

四、绝对定位的居中

对于一个使用了绝对定位的盒子来说，之前的居中方法margin: 0 auto;就失效了：

#pos1 {
  background-color: pink;
  margin: 0 auto;
  position: absolute;

}

效果：
在这里插入图片描述

下面进行修改：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
    }

    #pos1 {
      background-color: pink;
      position: absolute;
      left: 50%;
      margin-left: -50px;
    }
  </style>
</head>

<body>
  <div id="pos1" class="box">定位1</div>
</body>

主要的注意点是

  position: absolute;
  left: 50%;
  margin-left: -50px;

首先是绝对定位，然后left占50%，这时候盒子的左边缘会在屏幕的中间，然后再通过margin-left设置一个负数的宽度一半的左外边距，让整个盒子往左移动半个宽度，这时候盒子就居中了：
在这里插入图片描述

五、显示三角形组合图形

1、通过边框绘制三角形

例子：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-left-color: blue;
    }
  </style>
</head>

<body>
  <div id="box"></div>
</body>

显示：
在这里插入图片描述

原理就是设置宽高都为0，导致绘制边框的时候，中间部分是没有的，那么就会变成四个边都是三角形：

#box {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left-color: blue;
  border-right-color: red;
  border-top-color: green;
  border-bottom-color: yellow;
}

在这里插入图片描述

其中border的厚度决定了三角形的大小，然后由于整个边框先设置了transparent，所以边框是没有颜色的，然后通过指定某一个边的颜色，让对应方向的边框显示出来。

2、三角形和矩形组合位置

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      width: 500px;
      height: 300;
      position: relative;
    }

    #box1 {
      width: 300px;
      height: 100px;
      background-color: blue;
      position: absolute
    }

    #box2 {
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-left-color: blue;
      position: absolute;
      left: 300px;
      top: 50px;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="box1"></div>
    <div id="box2"></div>
  </div>
</body>