DocPortal
目录

定位

# 网页常见布局方式

  • 标准流：块级元素独占一行 -> 垂直布局；行内元素/行内块元素一行显示多个 -> 水平布局
  • 浮动: 可以让原本垂直布局的块级元素变成水平布局
  • 定位: 可以让元素自由的摆放在网页的任意位置； 一般用于盒子之间的层叠情况

# 定位常用的场景

  • 可以解决盒子与盒子之间的层叠问题：定位之后的元素层级最高，可以层叠在其他盒子上面

  • 可以让盒子始终固定在屏幕中的某个位置

# 定位基本使用

设置定位方式:

  • 属性名：position

  • 常见属性值：

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

设置偏移值:

  • 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可

  • 选取的原则一般是就近原则(离哪边近用哪个)

方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离

静态定位: 不定位，加与不加一样的效果，不详讲价，默认的定位方式。

# 相对定位

  • 自恋型定位相对于自己之前的位置进行移动

  • 代码：position:relative;

  • 特点：

    • 需要配合方位属性实现移动
    • 相对于自己原来位置进行移动
    • 在页面中占位置→没有脱标

  • 应用场景：配合绝对定位组CP(子绝父相)；用于小范围的移动

  • 绝对定位快捷键：por

  • box {
  position:relative;
   left:100px;
   top:100px
   /*相对于box原来位置左移动100px，向下移动100px*/
}
    1
    2
    3
    4
    5
    6

    没有定位：

    相对定位后：

    同时还是独占一整行的：

    注意：如果left和right都有，以left为准；top和bottom都有以top 为准

    1. 占有原来的位置

    2. 仍然具体标签原有的显示模式特点

    3. 改变位置参照自己原来的位置

# 绝对定位

  • 拼爹型定位相对于非静态定位的父元素进行定位移动

  • 代码：position:absolute;

  • 特点：

    • 需要配合方位属性实现移动
    • 默认相对于浏览器可视区域进行移动
    • 在页面中不占位置→已经脱标应用

  • 场景：配合绝对定位组CP(子绝父相）

  • 绝对定位：先找已经定位的父级，如果有这样的父级就以这个父级为参照物进行定位；有父级，但父级没有定位，以浏览器窗口为参照为进行定位

  • 绝对定位快捷键：poa

  • box {
  position:absolute
   left:0;
   top:0
}
    1
    2
    3
    4
    5

    没有定位：

托标，不占位置的：

  • 脱标，不占位

  • 改变标签的显示模式特点：具体行内块特点（在一行共存，宽高生效)

# 子绝父相(子级绝对定位)

工作中一般不取绝对定位参照body浏览器窗口该位置这种情况，一般参照一个有定位的父级去改位置。

父级定位了，在子级中使用相对定位，此时的子级的定位是相对于父级区域来定位的。父级的定位可以使用相对、绝对定位，工作中一般使用相对定位

当父级没有定位，此时会往外层级找定位，如果在爷级找到定位，此时子级会相对于爷级定位，如果爷级没有最终会相对于浏览器定位。

绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位

.father{
    position:relative;
    width:400px;
    height:400px;
    background-color:pink; 
}


.son {
/*相对，绝对*/
/*父级相对定位；子级绝对定位--子绝父相*/
/*position:relative;*/
/*position:absolute;*/
/*right:100px;*/
 width:300px;
 height:300px;
 background-color:skyblue;
}

.sun {
  position:absolute;
  /*1eft:20px;
  top:30px;*/
  right:20px;
  bottom:50px;
  
  width:200px;
  height:200px;
  background-color:green;
 }
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

# 案例

# 卡片模块的hot图标定位案例（使用自觉父相）

<style>
     .content li{
        position: relative;
    }
    
    .content li .hot{
        position: absolute;
        right:-4px; // 负数：相对于右侧向右4px,就出去一点点
        top:4px; //相对于爷级是顶部向下4px;
    }
    
</style>
<div class="content clearfix">
  <ul>
    <1i>
      <a href="#">
          <img src="./images/course07.png" alt="">
          <h3>ThinkPHP5.θ博客系统实战项目演练</h3>
          <p><span>高级</span>·1125人在学习</p>
          <img src="./images/hot.png" alt="" class="hot" > <!-- 定位hot图标 -->
       </a>
    </1i>
     <1i> ...</1i>
   </ul> 
</div>
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
# 子绝父相水平居中

需求：使用子绝父相让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

transform:translate(-50%,-50%)

<style>
.box{
  /*1.绝对定位的盒子不能使用左右marginauto居中*/
  position:absolute;
  /*margin:0 auto;*/
  left: 50%; //左右水平，绝对定位左50%,此时区域最左边在中间，盒子没有在中间
 /* margin-left: -150px; // margin-left使盒子的宽度width相左移动一半(300px/2)，此时盒子水平居中*/
  top: 50%;   //垂直一样
 /* margin-top: -200px; //  margin-top使盒子向上height移动一半(400px/2)居中。*/
 /*位移：自己宽度高度的一半*/   
  transform:translate(-50%,-50%)
    
  width:300px;
  height:400px;
  background-color:pink;
</style>
<body>
    <div class ="box"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 导航二维码居中定位案例

需求：根据设计图，在导航案例基础上，定位二维码图片完成一致的效果

<head>
 <style>
   ul 1i .app {
     position:relative; /*父级相对定位*/
    }
  .code{
    position:absolute; /*子级绝对定位，绝对定位不占位置*/
    left:50%; /*居中*/
    top:41px; /*向下一点*/
    transform:translate(-50%); /*水平居中*/
    }   
</style>
</head>
<body>
<!--导航-->
<div class="nav">
  <ul>
    <1i><a href="#">我要投资</a></1i>
    <1i><a href="#">平台介绍</a></li>
    <1i><a href="#">新手专区</a></1i>
    <!--因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部-->
    <li><a href="#”class="app">手机微金所
      <img src="./images/code.jpg”alt=""class="code"></a></li>
    <1i class="last"><a href="#">个人中心</a></li>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 底部半透明遮罩效果

需求：根据设计图，通过代码在网页中完成一致的效果

注意点：定位的元素会脱标（如：绝对定位），脱标后的元素宽高默认由内容撑开

绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0

<head> 
 <style>
  .banner{
     position:relative;
     margin:0 auto;
     width:1226px;
     height:600px;
    }  
   .mask {
     position:absolute;
     left:0;
     bottom:0;
    /*绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0*/
    /*width:1226px;*/
    /*如果子级和父级的宽度相同*/  
       width: 100%;
    height:150px;
    background-color:rgba（0,θ,θ,.5);
   }
  </style>
</head>
<body>
 <div class="banner">
   <img src="./images/bg.jpg" alt="">
   <!--遮罩-->
   <div class="mask">111</div>
  </div>
</body>
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

# 固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed;

特点：

  • 需要配合方位属性实现移动相
  • 对于浏览器可视区域进行移动
  • 在页面中不占位置→已经脱标

应用场景：让盒子固定在屏幕中的某个位置,上下滑动，此时导航栏固定在头部不变

# 元素的层级关系

  • 不同布局方式元素的层级关系：标准流<浮动<定位
  • 不同定位之间的层级关系：
    • 相对、绝对、固定默认层级相同
    • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

如果两个同层级都定位了，到底谁压谁？谁在上面谁在下面？

  • 有定位在上，压着标准流；
  • 如果同层级两个标签都有定位，默认最后的一个标签在上
  • 如果同层级的多个标签，要实现特点的标签在上，可通过在z-index来实现，它的值取整数，取值越大显示顺序越靠上，z-index的默认值是0，注意：z-index必须配合定位才生效。
<head> 
  <style>
    .one{
        position: absolute;
        left:20px;
        top:50px;
        z-index: 1;
        background-color:pink;
     }
     .two{
        position:absolute;
        left:50px;
        top:100px;
        background-color:skyblue;
     }
    /* 默认情况下，定位的盒子后来者居上z-index：整数；取值越大，显示顺序越靠,
      z-index的默认值是0。 注意：z-index必须配合定位才生效*/
  </style>
</head>
<body>
  <div class="one">one</div>
  <div class="two">two</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上次更新: 2024/07/10, 18:38:04
盒子模型
装饰

← 装饰→

Theme by Vdoing | Copyright © 2024-2024 VirtualAgent | Apache 2.0 License