CSS 定位学习记录

2018-05-04 13:58:11

块级元素和内联元素之间的区别

  1. 块元素总是独占一行的
  2. 内联元素总是和相领的内联元素处于同一行的，只有当宽度被占满时，才会另起一行

块级元素

  • div
  • h1~h6
  • table
  • ol、ul、li
  • p
  • ...

内联元素

  • a
  • span
  • img
  • input
  • ...

假如有如下代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid #FFF;
        }
    </style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>

因为div是块元素，所以每个div独占一行，具体表现形式为:

这就是标准流中的块元素的显示方式。

如果我们加上内联样式，使其变为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test {
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid #FFF;
        }
    </style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

<span>now you can see me1</span>
<span>now you can see me2</span>
<span>now you can see me3</span>
<span>now you can see me4</span>
</body>
</html>

具体表现形式为

我们很明显的看到两种方式表现形式的不同，以及基本的特性。这就是传统的标准流。

除了标准流以外，还有两种布局方式，分别为

  • 浮动
  • 定位

position 属性的意义

  • position 属性决定了元素将如何定位
  • 通过top,right,bottom,left实现位置

position 中的可选参数

  • static
  • relative
  • absolute
  • fixed
  • inherit

static

为默认值，元素按照标准流的方式进行正常排列

relative

相对定位，使用后元素仍然处于正常的文档流中，但是我们可以通过left,top,right,bottom来改变元素的位置，代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            left: 0;
            top: 100px;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background: blue;
            position: relative;
            left: 0;
            top: -50px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

具体展现效果如下

此时先在top为100px的地方，建立长宽均为100px的红色区块。值得注意的是，如果我们拿掉 .div1 中的 position: relative; 后，发现指定的top：100px,已经失效了。
这是因为position的默认值为static，元素按照标准流的方式进行正常排列的，声明的left,top,bottom,以及right失效了。

接着，我们声明的 .div2 会相对于 .div1 top -50px的位置，开始创建一个长宽均为100px的元素，最终展示了上图所示的效果。

absolute

使用了 absolute 的元素配合 top,bootom,right,left等位置属性，元素将会脱离正常的文档流，在整个网页中都是可以移动定位的，并且脱离了层级的概念，并且后写的元素将会覆盖先写的元素。

测试代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .test {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

        .bro {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="bro"></div>
    <div class="test"></div>
</body>
</html>

展示效果如图所示

我们很清楚的看到，红色位于蓝色的下方。也就是说如果一个div中有个absolute属性元素，没有left或是top值，就会像一个普通的inline-block属性元素在这个div里面，但是一旦设置了left:0;top:0，这个absolute元素就会直接从DOM脱离，独立于文档流，结果相对于最近的relative属性的祖先标签定位（如果没有，就body定位）。

我们给.test加下 left:0;或 top:0; 显示结果如图所示

可以看到，红色脱离了当前的文档流，并且将蓝色的区域覆盖掉了。

fixed

固定定位，即使用了fixed参数的元素，配合top,left,right,bootom等位置属性，元素会脱离正常的文档流，不受制于标准流的约束。
此元素使用和absolute很是相似，学习它只需要掌握和absolute的区别就可以了，看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .test {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            left:0;
        }

        .per {
            width: 300px;
            height: 300px;
            background: blue;
            margin-left: 200px;
            margin-top: 200px;
        }

    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
    </div>

</body>
</html>

最终展现效果如下

看到红色已经彻底脱离了其父级.per的控制，此时 absolute 和 fixed 效果是一模一样的。但是如果父级声明一下position属性，只要不使用默认值 static，代码即更改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .test {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            left:0;
        }

        .per {
            width: 300px;
            height: 300px;
            background: blue;
            position: fixed;
            margin-left: 200px;
            margin-top: 200px;
        }

    </style>
</head>
<body>
    <div class="per">
        <div class="test"></div>
    </div>

</body>
</html>

最终效果如图所示

可以看到，absolute 还是受制于 声明 position(非static)的父级元素的，而 fixed 则不受此限制，完全无视父级的声明，直接脱离。非常适合做那些万恶的广告层.

inherit

继承父元素的position 的值, 继承父元素的定位方式

z-index

  • 可以设置元素的叠加顺序，但依赖定位属性
  • z-index 大的元素会覆盖掉 z-index 小的元素
  • z-index 为auto的元素不参与层级比较
  • z-index 为负值，元素被普通流中的元素覆盖