CSS之元素定位 (十)：标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index

AHuSjCoding

已于 2023-06-10 15:05:43 修改

阅读量311

点赞数

分类专栏： CSS3 文章标签： css html 前端

于 2023-05-22 16:14:27 首次发布

本文链接：https://blog.csdn.net/Sedrick_/article/details/130790361

版权

CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

跳转目录🚀

篇章	知识点
CSS之邂逅(一)	认识CSS、编写CSS样式、CSS注释、常见的CSS属性
CSS额外知识补充(二)	link元素、计算机进制、CSS表示颜色、Chorme调试工具、浏览器渲染流程
CSS属性与选择器(三)	CSS文本属性、CSS字体属性、CSS常见选择器
CSS属性的特性(四)	CSS属性的继承、CSS属性的层叠、CSS属性的类型、display属性、元素的隐藏、overflow属性、CSS不生效技巧
CSS盒子模型(五)	认识盒子模型、内容width/height、内边距padding、边框/圆角border、外边距margin、盒子和文字阴影、box-sizing
CSS设置背景(六)	background-(image、repeat、size、position、attachment)、background、background-image和img对比
CSS高级元素的使用(七)	列表元素、表格元素、表格合并、表单元素、表单常见属性
CSS之Emme语法t和结构伪类(八)	认识Emmet、常见Emmet语法、常见的结构伪类、否定伪类的使用
CSS额外知识补充(九)	border图形、Web网络字体、Web字体图标、CSS精灵图、cursor属性
CSS元素定位(十)	标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index
CSS元素浮动(十一)	认识浮动、浮动的规则、浮动的案例、高度塌陷、清除浮动、布局方案对比
CSS flex布局(十二)	认识flex布局、flex布局的理解、flex-container属性、flex-item属性

1. 标准流布局 Normal Flow

1.1 认识标准流(文档流)

什么是标准流？：在默认情况下，元素都是按照 标准流(normal flow) 进行排布的
标准流的特性
1. 从左到右，从上到下按顺序摆放好
2. 默认情况下，互相不存在层叠现象

在这里插入图片描述

1.2 标准流的位置调整

标准流的位置调整：在标准流中，我们可以使用 margin padding对元素进行定位，其中margin可以设置为负数
存在的缺点
1. 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果
2. 不便于实现元素层叠的效果
如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢？
===> 接下来就开始介绍position属性，我们通过这个属性进行设置

2. 认识元素的定位

什么是定位？：定位允许您从正常的文档流布局中取出元素(脱标)，并使它们具有不同的行为。可以根据不同的参考对象进行定位。
定位的应用场景

2.1 position 属性

postion属性的常用取值：使用下面的值, 可以让元素变成 定位元素(positioned element)
1. static：默认值，静态定位
2. fixed：固定定位
3. relative：相对定位
4. absolute：绝对定位
5. sticky：粘性定位

2.2 定位元素 positioned element

什么是定位元素： position值不为static的元素,也就是position值为relative、absolute、fixed的元素，即定位元素就可以使用 top、bottom、left、right进行定位了。

3. 静态定位 static

position 属性的默认值 ：static 静态定位
静态定位的特性
1. static表示元素按照标准流normal flow 布局
2. 其中 left 、right、top、bottom没有任何作用
案例练习

<!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>
    /*  */
    .box {
      /* display: inline-block; */
      position: static;

      /* postion属于静态定位 */
      left: 100;
      top: 100px;
      bottom: 20px;
      right: 30px;
    }
  </style>
</head>

<body>

  <div>div元素</div>
  <span>span元素</span>
  <img src="../images/gouwujie01.jpg" alt="">
  <div class="box">我是box盒子</div>

</body>

</html>

4. 相对定位 relative

相对定位的特性：
1. 相对定位的元素还是按照标准流normal flow布局
2. 可以通过left、right、top、bottom进行定位，参考对象为元素自己原来的位置
相对定位的应用场景 ：在不影响其他元素位置的前提下，对当前元素位置进行微调
参照对象模型
案例练习：

<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>
    div {
      font-size: 20px;
    }

    span {
      font-size: 12px;
      position: relative;
      bottom: 8px;
    }
  </style>
</head>
<body>
  
  <div>
    3<span>2</span> + 2<span>3</span> = 17
  </div>

</body>

4.1 相对定位视口居中案例(较难)

方案一：通过背景 background-position属性设置

<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>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      height: 489px;
      background-color: #f00;
      background: url(../images/mhxy.jpg) center;
    } 
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>

方案二：img图片通过相对定位
思路步骤：
1. 首先通过 positon:relative; 设置相对定位，向左边移动图片的一半
2. 向右边移动父盒子的一半
案例练习

<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>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      height: 489px;
      background-color: #f00;
      overflow: hidden;
    }

    .box img {
      position: relative;
      /* left: 图片的一半 */
      left: -960px;
      /* translate中的百分比是相对于自己 */
      /* transform: translate(-50%); */

      /* 向右边移动div的一半,margin的百分比是相对于父盒子 */
      margin-left: 50%;
    }
  </style>
</head>

<body>

  <div class="box">
    <img src="../images/mhxy.jpg" alt="">
  </div>

</body>

5. 固定定位 fixed

固定定位的特性：
1. 元素脱离normal flow（脱离标准流、脱标）
2. 可以通过left、right、top、bottom进行定位，定位参照对象是视口（viewport）
3. 当画布滚动时，固定不动

5.1 画布和视口

视口 viewpoint ：文档的可视区域
画布 canvas：用于渲染文档的区域，文档内容超出视口范围，可以通过滚动查看

其中，画布 >= 视口，红色框为视口，黑色框为画布
在这里插入图片描述

固定定位案例练习

<!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>
    .handle {
      position: fixed;
      right: 30px;
      bottom: 30px;
    }

    .handle .item {
      width: 80px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: brown;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
    }

    .handle .item:hover {
      background-color: red;
    }

    .top {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  
  <div class="handle">
    <div class="item top">顶部</div>
    <div class="item bottom">反馈</div>
  </div>

  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>
  <br><br><br><br><br>

</body>
</html>

6. 绝对定位 absolute

绝对定位的特性：
1. 元素脱离normal flow（脱离标准流、脱标）
2. 可以通过left、right、top、bottom进行定位==>定位参照对象是最邻近的定位祖先元素,如果找不到这样的祖先元素，参照对象是视口

6.1 子绝父相

备注：父元素不是只能相对定位，参考对象是最邻近的定位祖先元素，一般不希望父元素脱标就会使用相对定位。

应用场景： 在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：简称为“子绝父相”
1. 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
2. 子元素设置position: absolute

案例练习
在这里插入图片描述

<!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>
    .container {
      width: 1000px;
      height: 800px;
      background-color: #f00;

      /* position: fixed; */
      position: relative;
      top: 0;
    }

    .box {
      position: relative;

      width: 600px;
      height: 400px;
      background-color: #0f0;
    }

    strong {
      /* 脱离标准版 */
      position: absolute;

      /* 设置的四个值 */
      /* 在没有祖先元素定位的情况下, 相对于的是谁? 视口 */
      right: 0;
      top: 0;
    }

    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div>哈哈哈啊</div>
  <div class="container">
    <div class="box">
      <span>我是span元素</span>
      <strong>我是strong元素</strong>
      <img src="../images/gouwujie01.jpg" alt="">
      <div>我是div元素</div>
    </div>
  </div>
  <div>呵呵呵呵</div>

</body>
</html>

6.2 绝对定位元素 absolutely positioned element

什么是绝对定位元素： position值为absolute或者fixed的元素
绝对定位元素的特性
1. “几个不再”
  - (最重要！) 不再受标准流的约束
  - 不再严格按照从上到下、从左到右排布
  - 不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)的很多特性都会消失
  - 不再给父元素汇报宽高数据
2. 可以随意设置宽高，默认宽高由内容决定
3. 脱标元素内部默认还是按照标准流布局
绝对定位元素的盒子模型公式
1. 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
2. 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
扩展：根据绝对定位元素在参照对象中的模型公式，我们有几个技巧需要掌握
1. 绝对定位元素和参照对象的宽一样：left:0; right:0; margin-left:0; margin-right:0; width:auto或不设置width默认为auto
2. 绝对定位元素和参照对象的高一样：left:0; right:0; margin-left:0; margin-right:0; width:auto或不设置width默认为auto
3. 绝对定位元素在定位参照对象中水平居中显示：left:0; right:0; margin:0 auto;设置具体的width宽值（宽小于定位参照对象的宽）
4. 绝对定位元素在定位参照对象中垂直居中显示：top:0; bottom:0; margin:auto 0;设置具体的height高值（高小于定位参照对象的高）

案例练习1：

可以看出，strong标签脱标后不再给父元素汇报宽高数据，因此.box就没有了高度。并且strong成为了绝对定位元素，可以随意设置宽高，子元素还是按照表准流进行布局。
在这里插入图片描述

<!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>
    .box {
      background-color: #f00;
    }

    .box strong {
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #0f0;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <strong>
      <span>我是strong元素</span>
      <i>我是i元素</i>
    </strong>
  </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>
    .box {
      width: 800px;
      height: 300px;
      background-color: #f00;
      position: relative;
    }

    /* 兼容性 */
    .container {
      height: 100px;
      background-color: #0f0;
      
      width: 200px;
      /* width: 100%; */
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  
  <div class="box">
    <div class="container"></div>
  </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>
    /* 重置代码 */
    a {
      text-decoration: none;
      color: #333;
    }

    /* 公共的CSS */
    .sprite_01 {
      background-image: url(../images/music_sprite_01.png);
      display: inline-block;
    }

    .sprite_02 {
      background-image: url(../images/music_sprite_02.png);
      display: inline-block;
    }

    .sprite_02_icon_music {
      width: 14px;
      height: 11px;
      background-position: 0 -24px;
    }

    .sprite_02_icon_play {
      width: 16px;
      height: 17px;
      background-position: 0 0;
    }

    /* 布局代码 */
    .item {
      width: 140px;
      margin: 0 auto;
    }

    .item .top {
      position: relative;
    }

    .item .top img {
      /* 将图片下面的多出来的区域去除 */
      vertical-align: top;
      /* display: block; */
    }

    .item .top .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      background-image: url(../images/music_sprite_01.png);
      background-position: 0 0;
    }

    .item .top .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 27px;
      padding-left: 10px;
      line-height: 27px;

      font-size: 12px;
      color: #ccc;

      background-image: url(../images/music_sprite_01.png);
      background-position: 0 -537px;
    }

    .item .top .info .icon-music {
      position: relative;
      top: 1px;
      /* display: inline-block; */
      /* width: 14px;
      height: 11px; */

      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 -24px; */
    }

    .item .top .info .count {
      margin-left: 4px;
    }

    .item .top .info .icon-play {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto 0;

      /* display: inline-block; */
      /* width: 16px;
      height: 17px; */
      /* background-image: url(../images/music_sprite_02.png); */
      /* background-position: 0 0; */
    }


    /* 底部的样式 */
    .item .bottom {
      display: block;
      margin-top: 8px;
      font-size: 14px;
    }

    .item .bottom:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  
  <div class="item">
    <div class="top">
      <img src="../images/music_album01.jpg" alt="音乐封面">
      <a class="cover" href="#"></a>
      <div class="info">
        <i class="sprite_02 sprite_02_icon_music icon-music"></i>
        <span class="count">62万</span>
        <i class="sprite_02 sprite_02_icon_play icon-play"></i>
      </div>
    </div>
    <a class="bottom" href="#">
      天气好的话，把耳机分给我一半吧
    </a>
    <i class="sprite_02 sprite_02_icon_play"></i>
    <i class="sprite_02 sprite_02_icon_music"></i>
  </div>

</body>
</html>

6.3 postion值对比

在这里插入图片描述

6.4 auto到底是什么？

auto：即交给浏览器来处理
不同情况下auto的处理
1. .行内非替换元素 -> width: 包裹内容
2. 块级元素 ->width: 包含块的宽度
3. 绝对定位元素 -> width: 包裹内容

7. 粘性定位 sticky

粘性定位的特性：
1. 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点；当达到这个阈值点时, 就会变成固定(绝对)定位
2. sticky粘性定位的参照对象是相对于最近的包含滚动视口的滚动祖先(the nearest ancestor scroll container’s scrollport )
3. 可以看做是相对定位和固定(绝对)定位的结合体
4. 粘性定位是遵循标准流布局的
粘性定位的兼容性：sticky是一个大家期待已久的属性，比起其他定位值要新一些.

案例练习：
top设置为0，表示当元素离最近的包含滚动视口的滚动祖先顶部距离为0时，就会开始固定或绝对定位

 .nav {
      background-color: #f00;
      color: #fff;

      /* position: relative;
      top: 0;
      left: 0;
      right: 0; */
      position: sticky;
      top: 0;
    }

8. z-index 定位元素的属性

作用：z-index属性用来设置定位元素的层叠顺序(仅对定位元素有效)，取值可以是正整数、负整数、0、auto(默认值，浏览器一般会当成0来处理)
比较原则：
- 兄弟关系：如果一个元素设置了定位元素，即使被包裹了一个div容器，那么这几个定位元素也是兄弟关系
- 不是兄弟关系：如果一个定位元素的祖先元素是定位元素，比如要和堂兄弟或其他关的定位元素作比较，我们只能比较祖先定位元素是兄弟关系的层级。如果兄弟a层级低，即便是包含的定位元素层级再高也无法跳出父元素的层级。
层级案例练习

<!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>
    .item {
      position: fixed;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
    }

    .item2 {
      position: relative;
      width: 100px;
      height: 100px;
      left: 0;
      top: 0;
      background-color: #f00;
    }

    .box2 {
      left: 20px;
      top: 20px;
      background-color: #0f0;
      z-index: 2;
    }

    .box3 {
      left: 40px;
      top: 40px;
      background-color: #00f;
    }

    .info {
      position: fixed;
      top: 0;
      z-index: 999;
    }
  </style>
</head>

<body>

  <div class="item box1">1</div>
  <div class="container">
    <div class="item2 box2">
      <div class="info">哈哈哈</div>
      <!-- <div>呵呵呵</div> -->
    </div>
  </div>
  <div class="item box3">3</div>

</body>

</html>

AHuSjCoding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之元素定位 (十)：标准流布局、认识元素的定位、静态定位、相对定位、固定定位、绝对定位、粘性定位、z-index

标准流的位置调整：在标准流中，我们可以使用对元素进行定位，其中margin可以设置为负数存在的缺点如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢？===> 接下来就开始介绍，我们通过这个属性进行设置什么是定位元素： position值的元素,也就是position值为的元素，即定位元素就可以使用 top、bottom、left、right进行定位了。4. 相对定位 relative相对定位的特性：相对定位的元素还是布局相对定位的应用场景：在不影响其他元素位置的前提
复制链接

扫一扫