个人博客
0%

【CSS】CSS定位

发表于 分类于

页面布局常用方式之二：定位，将详细介绍定位的使用

1 定位

1.1 使用场景

  • 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

1.2 定位组成

  • 定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
  • 定位 = 定位模式 + 边偏移
    • 定位模式：用于指定一个元素在文档中的定位方式
    • 边偏移：决定了该元素的最终位置

1.3 边偏移

  • 边偏移：定位的盒子移动到最终位置，有top, bottom, left, right
边偏移属性 示例 描述
top top: 80px 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom bottom: 80px 底部偏移量，定义元素相对于其父元素下边线的距离
left left: 80px 左侧偏移量，定义定义元素相对于其父元素左边线的距离
right right: 80px 右侧偏移量，定义元素相对于其父元素右边线的距离
  • 一般”上下”和”左右”选一个值出来即可
    • 如果top、bottom同时出现，优先执行top
    • 如果left、right同时出现，优先执行left

1.4 定位模式

  • 定位模式决定了元素的定位方式，它通过CSS的Position属性设置，值有以下四种
值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
  • （1）静态定位
    • 静态定位是元素的默认定位方式，无定位的意思
    • 语法：选择器 {position: static;}
    • 静态定位按照标准流特性摆放位置，他没有边偏移
  • （2）相对定位
    • 相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）
    • 语法：选择器 {position: relative;}
    • 移动位置的时候是参照原来自己的位置进行移动
    • 相对定位后，原先在标准流占有的位置依然存在，不会像浮动那样消失
  • （3）绝对定位
    • 绝对定位是在元素移动位置的时候，是相对于它祖父元素来说的（拼爹型）
    • 语法：选择器 {position: absolute}
    • 如果没有祖父元素或祖父元素没有进行定位，则以浏览器为主进行定位
    • 如果祖父元素有了定位后，会以其最近有定位的祖父元素作为参考点
    • 绝对定位会脱离标准流，不再占有原来的位置，类似浮动
  • （4）固定定位
    • 固定定位：使元素固定于浏览器可视区的位置
    • 主要使用场景：在浏览器页面滚动时元素的位置不会改变
    • 语法：选择器 {position: fixed}
    • 固定定位是以浏览器可视化窗口为参照
    • 固定定位不占位置，脱离标准流

1.5 定位小技巧

  • （1）子绝父相
    • 如果要使用绝对定位，一般来说参照物都是父元素，所以需要给父元素使用定位，于是相对定位比较好。
    • 相对定位是不脱离标准流的，不会影响页面的布局
  • （2）固定定位到版心
    • 通过边偏移水平调整到页面的一半：left: 50%
    • 通过外边距水平调整版心宽度的一半：margin-left: 版心宽度一半
  • （3）绝对定位盒子水平居中
    • 加了绝对定位的盒子，不能够使用margin: 0 auto来实现水平居中
    • 通过边偏移水平调整到页面的一半：left: 50%
    • 通过外边距水平调整到（负数）盒子宽度的一半: margin-left: -盒子宽度的一半

1.6定位叠放次序

  • 使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的前后次序（z轴）
  • 语法：选择器 {z-index: 1;}
  • 数值可以是正整数或负整数。默认为auto，数值越大，盒子图层越上
  • 若数值一样大，后写的在上面
  • 只有定位的盒子才能设置z-index属性

1.7 拓展：粘性定位

  • 粘性定位：可以认为是相对定位和固定定位的混合
  • 语法：选择器 {position: sticky; top: 10px}
    • 解释：当距离顶部为10px的时候，变成固定定位
  • 特点：
    • 以浏览器可视窗口作为参照点
    • 粘性定位占有原先的位置，不脱离标准流
    • 必须添加top, bottom, left, right其中一个属性才生效

1.8 拓展：定位特性

  • 加了绝对定位/固定定位的盒子可以直接设置宽高，类似浮动
  • 若块级元素添加了绝对定位/固定定位，宽高会默认为盒子内容的大小
  • 浮动会影响标准流的盒子，但不会影响文字和图片，不会覆盖它们
  • 绝对定位，固定定位会连文字和图片都会影响

2 案例：淘宝焦点图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淘宝焦点图</title>
  <style>
    /*消除页面自带内外边距*/
    * {
      margin: 0;
      padding: 0;
    }

    /*消除a标签的下划线*/
    a {
      text-decoration: none;
    }

    /*清除列表原点*/
    li {
      list-style: none;
    }

    /*轮播图父盒子：相对定位，宽，高，外边距*/
    .tb-promo {
      position: relative;
      width: 520px;
      height: 280px;
      margin: 100px auto;
    }

    /*轮播图片：宽， 高*/
    .tb-promo img {
      width: 520px;
      height: 280px;
    }

    /*左右切换图片按钮：绝对定位，外边距，宽， 高，行高居中，水平居中，文字颜色，透明背景色*/
    .prev, .next {
      position: absolute;
      top: 50%;
      margin-top: -15px;
      width: 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
    }

    /*左侧按钮：水平位置，圆角位置*/
    .prev {
      left: 0;
      border-radius: 0 15px 15px 0;
    }

    /*右侧按钮：水平位置，圆角位置*/
    .next {
      right: 0;
      border-radius: 15px 0 0 15px;
    }

    /*底部导航栏：绝对定位，水平位置，垂直位置，宽，高，透明背景色，圆角*/
    .promo-nav {
      position: absolute;
      left: 50%;
      bottom: 15px;
      width: 70px;
      height: 13px;
      margin-left: -35px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 7px;
    }

    /*圆点按钮：浮动，宽，高，背景色，圆角，外边距*/
    .promo-nav li {
      float: left;
      width: 8px;
      height: 8px;
      background-color: white;
      border-radius: 4px;
      margin: 3px;
    }

    /*圆点被点击后的样式*/
    .promo-nav .selected {
      background-color: #ff5000;
    }
  </style>
</head>
<body>
  <div class="tb-promo">
    <img src="image/淘宝轮播图.jpg" alt=""/>
    <a class="prev" href="#"><</a>
    <a class="next" href="#">></a>
    <ul class="promo-nav">
      <li class="selected"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</body>
</html>

3 元素的显示与隐藏

3.1 display属性

  • 隐藏对象：display: none
    • 元素隐藏后不会再占有原来的位置
  • 显示对象：display: block

3.2 visibility属性

值 介绍
inherit 继承上一个父对象的可见性
visible 对象显示
hidden 对象隐藏
collapse 隐藏表格的行和列
  • visibility对象隐藏后会保留原来的位置

3.3 overflow属性

值 介绍
visible 不剪切内容，也不添加滚动条
auto 是body和textarea的默认值；在需要时剪切内容并添加滚动条
hidden 不显示超出对象尺寸的内容
scroll 溢出部分用滚动条查看

3.4 案例：土豆网鼠标经过显示遮罩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>土豆网隐藏遮罩</title>
  <style>
    .potato {
      position: relative;
      width: 444px;
      height: 320px;
      margin: 100px auto;
    }

    .potato img {
      width: 100%;
      height: 100%;
    }

    .potato .mask {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }

    .potato:hover .mask {
      display: block;
    }
  </style>
</head>
<body>
  <div class="potato">
    <div class="mask"></div>
    <img src="image/凌波.jpg" alt=""/>
  </div>
</body>
</html>