7-CSS-定位

671 views

笔记目录

图片

14 遵循原则

14.1 页面布局

  1. 必须确定页面的版心（可视区），我们测量可知
  2. 分析页面中的行模块以及每个行模块中的列模块。页面布局的第一准则
  3. 一行中的列模块经常浮动布局，先确定每个列模块的大小，之后确定列的位置。页面布局的第二准则
  4. 制作HTML结构，我们是遵循先有结构（更重要），后有样式的原则

14.2 CSS属性专业书写顺序

1.布局定位属性：display / position / float / clear / visibility/ overflow （建议display第一个写，毕竟关系到模式）

2.自身属性：width / height / margin / padding / border/ background

3.文本属性：color / font / text-decoration / text- align / vertical-align / white- space / break-word

4.其他属性（CSS3） ：content / cursor / border-radius / box- shadow / text -shadow / background：linear-gradient...

15 定位

为什么需要定位？

以下两点效果通过标准流和浮动都没有办法实现：

  • 让盒子自由地在某个父盒子里面移动位置
  • 在页面滚动时，让盒子能够固定在页面的某个位置。

15.1 定位组成

定位：将盒子定在任意固定的位置

定位=定位模式+边偏移

（1） 定位模式：指定一个元素在文档中的定位方式（position属性）

有四种不同的定位模式：

  • static：静态定位
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

（2） 边偏移：决定该元素的最终位置（top、bottom、left、right属性）← 不再用margin和padding属性

注意：边偏移是相对于父级元素的

图片

15.2 定位模式

15.2.1 静态定位 position：static

是元素默认的定位方式，按照标准流摆放，无边偏移，表示"无定位"，一般不用

15.2.2 相对定位（父级） position：relative

相对于原来的位置进行边偏移，同时，继续占有原来的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 300px;
            height: 100px;
            background-color: skyblue;
        }
        .two {
            width: 300px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

正常没有加相对定位：

图片

加上相对定位后：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
   .one {
       width: 300px;
       height: 100px;
       background-color: skyblue;
       position: relative;  /* 相对定位 */ 
       top: 50px;           /* 边偏移 */ 
       left: 100px;
   }
   .two {
       width: 300px;
       height: 100px;
       background-color: pink;
   }
 </style>
 </head>

 <body>
 <div class="one"></div>
 <div class="two"></div>
 </body>

 </html>

图片

15.2.3 绝对定位（子级） position：absolute

相对祖先元素进行边偏移，同时，不再继续占有原来的位置

  • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）。
  • 如果祖先元素有定位（相对/绝对/固定定位），则以最近的一级有定位祖先元素为参考点进行移动元素。
  • 绝对定位脱离标准流，不再占有原来的位置（脱标）。

注意：子绝父相 （用得最多）

子级：绝对定位（不占位）；父级：相对定位（占位）

子绝父相的好处：

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的盒子。
  • 父盒子需要定位限制子盒子在父盒子内显示。
  • 父盒子布局时，需要占有位置，因此父亲只能是相对位置。如果父盒子是不占有位置，那么下面的元素会占据父盒子的位置，这样就重叠了。
.father .son {
    position: absolute;
    top: 5px;
    right: -4px;
}
.father {
    position:relative;
}

图片

绿色图片为father，hot标签为son

15.2.4 固定定位 position：fixed

相对于浏览器的可视窗口进行定位，不随页面滚动改变位置，同时，不再继续占有原来的位置

.one {
    position: fixed;
    top: 50px;
    left: 100px;
 }

如何固定在版心右侧位置：

  1. 让固定定位的盒子left50%，走到浏览器可视区的一半位置。
  2. 让固定定位的盒子margin-left：版心宽度的一半距离。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            width: 1000px;
            height: 1000px;
            background-color: skyblue;
            margin: 0 auto;
        }

        .fix {
            width: 50px;
            height: 100px;
            background-color: pink;
            position: fixed;     /* 固定定位 */
            top: 200px;
            left: 50%;       /* 先固定在页面中间 */
            margin-left: 505px;       /* 再往右移动505px(版心的一半) */
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="fix"></div>
</body>

</html>

图片

15.2.5 粘性定位position：sticky

粘性定位：相对定位和绝对定位的结合

  • 以浏览器的可视窗口为参照点移动元素（固定定位特点)
  • 粘性定位占有原先的位置（相对定位特点）
  • 必须添加 top 、 left、 right、bottom 其中一个才有效
  • 跟页面滚动搭配使用，兼容性较差，IE不支持
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 1000px;
            height: 6000px;
            background-color: aquamarine;
            margin: 0 auto;
        }
        .fix{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: sticky;     /* 粘性定位 */
            top: 0px;    /* 上滑到fix的顶部距离页面0px时转固定定位 */
            margin-left: 505px;
            margin-top: 400px;  /* 原本顶部有400px空白 */
        }
    </style>
</head>
<body>
    <div class="fix"></div>
    <div class="one"></div>
</body>
</html>

15.2.6 小结

图片

15.3 定位的叠放次序z-index：1

属性：使用 z-index 来控制盒子的叠放顺序

属性值：数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上

注意点：

  • z-index：后面的值只能是整数，并且没有单位。
  • z-index：只能用于修饰定位，如果盒子没有定位，那么就不可用。
  • 如果属性值相同，就按照书写顺序，后来居上。

15.4 定位拓展

15.4.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：0 auto进行水平居中，可以通过下面的方法实现：

  • left：50%（先让盒子左侧对齐页面正中间）

  • margin-left：盒子自身宽度的一半px（盒子左移自身宽度的一半，实现水平居中）

    注意点：

  • 垂直居中也是相同的原理

  • 相对定位没有脱离标准流，水平居中可以使用：margin：0 auto

图片

15.4.2 定位的特殊特性

添加了绝对/固定定位的盒子，在尺寸的特性上具有行内块元素的性质，某些特性上与浮动类似：

  • 行内元素添加绝对/固定定位，可以直接设置高度或者宽度
  • 块级元素添加绝对/固定定位，如果不给宽度或者高度，默认大小是内容的大小
  • 浮动元素，绝对定位，固定定位都是脱标的盒子，脱标的盒子不会触发外边距合并的问题（外边距塌陷）（不包括相对定位，因为相对定位没有脱标）
  • 浮动元素不会压住标准流里面的文字，而定位会
<!DOCTYPE html>
<html lang="en">

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

        .hezi1 {
            height: 200px;
            width: 200px;
            background-color: bisque;
        }

        .hezi2 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="hezi1"></div>
    <p class="hezi2">我是一行文字</p>
</body>

</html>

定义了一个盒子和一个段落，盒子用肉色表示，段落用赤色表示，两个都是块级元素。

图片

当给盒子加上浮动：（浮动可以用来做文字环绕效果）

图片

肉色并不会压住盒子的文字，只是会压住文字的盒子。

但是定位：

<!DOCTYPE html>
<html lang="en">

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

        .hezi1 {
            position:absolute;
            height: 200px;
            width: 200px;
            background-color: bisque;
        }

        .hezi2 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="hezi1"></div>
    <p class="hezi2">我是一行超级长的文字，我用来证明定位会压住文字</p>

</body>

</html>

结果压住了文字：

图片