关于html元素的css-定位

理解定位，首先要了解文档流是什么。

文件流：指盒子按照html标签编写的顺序，从上到下，从左到右排列，块元素占一行，从左到右排列，每一行元素在一行中从左到右排列，先写的先，后写的排在后面，每个盒子都占据自己的位置。

位置可以使方框脱离文档流，就好比将元素分割成几层，没有位置的在一层，定位在没有定位的上面一层。

你可以用Z-index设置等级，Z-index越大，显示的就越向前。在创建网页弹框时，通常将其设置为最大。

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。

absolute生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。

fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

static默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的定位</title>
    <style>
        .con1,.con2,.con3,.con4,.con5{
            border: 1px solid #000;
            margin: 10px;
            height: 400px;
        }
        /* 这个div属于它下属div的父元素，如果没有设置浮动，当下属div设置absolute时，相对于body偏移*/
        .con3{
            position: relative;  
        }
        .no_pos_1,.no_pos_2{
            height: 100px;
            width: 400px;
            margin :10px;
            font-size: 16px;
        }
        .no_pos_1{
            background-color: red;
        }
        .no_pos_2{
            background-color: gold;
        }

        .relative_1,.relative_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .relative_1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        .relative_2{
            background-color: gold;
        }

        .absolute_1,.absolute_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .absolute_1{
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .absolute_2{
            background-color: gold;
        }
        .fixed_1,.fixed_2{
            height: 100px;
            width: 400px;
            margin-top :10px;
            font-size: 16px;
        }
        .fixed_1{
            background-color: red;
            position: fixed;
            left: 50%;
            margin-left: -200px;  /* 设置水平垂直居中*/
            top: 50%;
            margin-top: -50px;
            z-index: 9999;   /*  弹框一般设置足够大的值 */
        }
        
         /* 弹框效果 */ 
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.6;      /* 设置透明度 */
            z-index: 9998;   /* 一般比弹框设置的值小1*/
        }
        .fixed_2{
            background-color: gold;
        }
        .static_1{
            height: 100px;
            width: 400px;
            margin-top :10px;
            background-color: gold;
            position: static;
        }
</style>
</head>
<body>
    <div class="mask">

    </div>
    <div class="con1">
        <div class="no_pos_1">
            没有使用定位
        </div>

        <div class="no_pos_2">
            没有使用定位
        </div>
    </div>
    <div class="con2">
        <div class="relative_1">
            relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移
        </div>
        <div class="relative_2">
            
        </div>
    </div>
    <div class="con3">
        <div class="absolute_1">
            absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
        </div>
        <div class="absolute_2">
            
        </div>
    </div>
    <div class="con4">
        <div class="fixed_1">
            fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
        </div>
        
        <div class="fixed_2">

        </div>
    </div>
    <div class="con5">
        <div class="static_1">
            static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
        </div>
    </div>
</body>
</html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143复制代码类型：[html]

制作一个弹框效果：

「链接」

、普通定位和相对定位

css中的元素有两种元素，块级元素和行级元素，块级元素每定义一个，第二个会自动换行，行级元素不会换行。如下图定义了三个块级元素div和两个行级元素span。

普通定位就是从上到下从左到右依次排布的布局。

普通定位代码

普通定位显示效果

相对定位是在普通定位的基础上作出一些变动，如本来这个元素应该在第二行的位置，设置position:relative,bottom:20px;他就会在原来普通定位中应处于的位置的基础上距离底部上浮20px;

他的位置浮动会使他的位置变化，但是他原本处于的文档空间不会改变。

比如相对定位使得本在第二行的元素div上浮了一行的高度，则他会和本来在第一行的元素叠加，但是他在第二行的位置还是会空在那里，下一个块级元素会从第三行开始布局。代码和效果如图

相对定位代码

相对定位效果

二、绝对定位和fixed定位

这两种定位都不占据文档空间，所以如果是普通流的元素遇到这些定位的元素会产生叠加情况。浮动元素也不占据文档空间

绝对定位是相对最近一个已经定位的祖先元素定位的，如果最近没有定位的祖先元素，则根据根元素定位。可以用来做提示框或者下拉搜索框。

代码和效果如图

绝对定位代码

绝对定位效果

上图可以看出

1、第一个空白背景框的div的祖先元素td已经使用了相对定位，虽然位置没有便宜，但是他的绝对定位是在哪个td元素的基础上进行定位的。

2、666的定位也是绝对定位，但是他没有已经定位的祖先元素，所以他的绝对定位是相对于根元素定位的。

3、空白框元素虽然占了很大的空间，但是背景灰色并没有铺满他所占的高度，这就是不占据文档空间，反观上面的普通定位和相对定位，都铺满了内含元素的背景。

fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。

通常用来写导航条或者回到顶部等。代码和效果如图。

fixed定位代码

fixed定位效果

三、浮动定位

浮动定位同样不占据文档空间，所以背景也不会铺满，下面例子中可以看出来。

浮动定位代码

浮动定位效果

1、浮动定位不占据空间

2、浮动定位会从左到右(这是左浮动，右浮动相反)依次排布，如果行宽不够则换行。换行的过程中如果左侧依然有元素占据，如下面的框1，则234会依次占据右侧空间。

SS中通常使用position 属性，决定元素的定位方式。

常用的定位方式通常有

值	意义
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

position 设置为 relative。

相对定位是元素相对于自己原来的位置通过使用top、left 等属性进行移动，使其显示在新的位置上。

相对定位的元素虽然移动了，但是之前的位置并没有放弃，同时也不会抢占移动后原有元素的位置(但会对原有位置的元素进行压盖)。

相对定位通常用来微调元素位置；而且相对定位可以作为下面要讲的绝对定位的参考坐标。

属性	值	作用
top	像素、百分比等	相对原来位置，距离上边移动距离，可以为负值
left	像素、百分比等	相对原来位置，距离左边移动距离，可以为负值
right	像素、百分比等	相对原来位置，距离右移动距离，可以为负值
bottom	像素、百分比等	相对原来位置，距离下边移动距离，可以为负值。

相对定位举例

像素描述位置

box2 开启了相对定位，在新的位置得到了渲染。

<!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>相对定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      p {
        width: 100px;
        height: 100px;
        background-color: orange;
        border: 1px solid #000;
      }


      .box2 {
        position: relative;
        top: 102px;
        left: 102px;
      }
</style>
  </head>
  <body>
    <p></p>
    <p class="box2"></p>
    <p></p>
  </body>
</html>

百分比形式

如果在相对定位中， top、left、bottom、right 写成百分比的形式，表示他们在父容器内所显示的百分比位置。

举例

父元素宽高均200px。开启子元素相对定位，则子元素位置如下。

<!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>相对定位概念</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 40px auto;
      }


      p {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div>
      <p></p>
    </div>
  </body>
</html>

绝对定位

position 设置为 absolute。

绝对定位的元素在浏览器中拥有绝对位置，可以通过坐标进行描述。

绝对定位的元素脱离标准文档流，释放了自己本来应该在的地方的位置；同时会在新的位置上对其他元素进行压盖。

绝对定位的元素会在自己祖先元素中寻找拥有定位属性的元素作为参考点。这个祖先元素通常是相对定位的。

绝对定位的元素如果找不到拥有定位属性的祖先元素作为参考点，则相对于 IBC（初始包含块，可以认为是HTML根元素）定位。

属性	值	作用
top	像素、百分比等	相对参考点位置，距离参考点上边移动距离，可以为负值
left	像素、百分比等	相对参考点位置，距离参考点左边移动距离，可以为负值
right	像素、百分比等	相对参考点位置，距离参考点右边移动距离，可以为负值
bottom	像素、百分比等	相对参考点位置，距离参考点下边移动举例，可以为负值。

举例

参考点IBC

参考点是IBC,此时的top、left、bottom、right都是通过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>绝对定位释放自己位置的示例</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 200px;
        height: 200px;
      }
      .box1 {
        background-color: orange;
      }
      .box2 {
        background-color: green;
        position: absolute;
        top: 230px;
        left: 200px;
      }
      .box3 {
        background-color: blue;
      }
</style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <ul>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
      <li>alalaladdddddddddddddddddddddddddddddddddd</li>
    </ul>
  </body>
</html>

参考点是定位元素

最经典的就是，父节点开启相对定位，子元素开启绝对定位；此时的top、left、bottom、right都是通过父元素的位置描述子元素。

<!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>子绝父相</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 402px;
        height: 402x;
        border: 1px solid #000;
        padding: 100px;
        margin: 0 auto;
        position: relative;
      }


      .box2 {
        width: 200px;
        height: 200px;
        padding: 50px;
        border: 1px solid #000;
        position: relative;
      }


      .box3 {
        width: 50px;
        height: 50px;
        border: 1px solid #000;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: orange;
      }
</style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
        <div class="box3">dual</div>
      </div>
    </div>
  </body>
</html>

固定定位

position 设置为 fixed。

不管页面如何下拉，元素永远固定在一个位置。

固定定位只以页面为参考点，并且同样也脱离了标准的文档流。

固定定位用途：

用于页面内容比较长，返回顶部功能等。
用于制作CSS精灵 (现在很少用了)

<!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>固定定位demo</title>
    <style>
        .box {
            position: fixed;
            top: 100px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: red;
        }


        body {
            height: 100000px;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

层叠属性

对于上述说的定位元素，他们都有可能压盖到渲染后的位置上的原有元素。某些场景下我们不希望此事发生。

此时就用到了 z-index属性。它的值是一个正整数，值越大会越在上面显示。

<!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>z-index属性演示</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background-color: orange;
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 2;
        }


        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            z-index: 10;
        }
</style>
</head>
<body>


    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

总结

相对定位：相对于自己原来的位置进行定位。

绝对定位：选一个参考点进行定位。参考点可以是拥有定位属性的祖先元素，如果找不到，则为IBC。

固定定位：在页面（可视化的屏幕）的固定位置，不随着页面滚动而滚动。

在线咨询

上一篇：细聊JavaScript设计原则和常用设计模式
下一篇：Web前端：带你深入了解Angular11新功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商