定位网页元素

一、postion定位

  <div id="father">
    <div class="box1">第一个盒子</div>
    <div class="box2">第二个盒子</div>
    <div class="box3">第三个盒子</div>
  </div>

示例图

1.postion相关属性值

postion相关属性值

1.1 static属性值

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

默认遵循正常文档流

1.2 relative属性值

相对定位：相对自身原来的位置进行偏移
偏移设置：top、left、bottom、right
left和top正、负取值的方向

取值方向

示例：将第一个盒子相对自己原来的位置进行移动

.box1{
      position: relative;
      left: 10px;
      top: 10px;
}

相对定位

相对定位元素的规律
（1）设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
（2）设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
（3）设置相对定位的盒子原来的位置会被保留下来

1.3 absolute属性值

偏移设置： left、right、top、bottom .
绝对定位不设置偏移量
设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

不设置向上的偏移量，盒子仍然位于原来的位置

absolute 注意的几个点
示例：将第二个盒子用绝对定位进行布局
（1）使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移，例下：

#father{
      border: 1px solid black;
      width: 500px;
      margin: 0 auto;
      position: relative;    /*设置父类元素相对定位*/
  }
/**/
.box2{
      position: absolute;
      left: 100px;
      top: 40px;
  }

父类设置了相对定位时

（2）如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位，例下：

父类没设置相对定位时

（3）绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响，例下
当二个盒子进行绝对定位操作时，其他两个盒子的定位并不会时候到影响

其他元素不会受到影响

（4）元素位置发生偏移后，它原来的位置不会被保留下来

1.4 fixed属性值

fixed为固定定位
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
相当于固定在浏览器窗口的位置，在浏览器上下滚动时，不会对元素造成影响

1.5 sticky属性值

stucky为粘性定位
它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）

2.定位小结

注意：相对定位限制绝对定位

意思是当父类设置相对定位时，子类设置绝对定位，子类的变化只是会在父类容器里面去变化，父类随意移动，子类也会随父类一起移动变化

2.1 相对定位

特性
（1）相对于自己的初始位置来定位
（2）元素位置发生偏移后，它原来的位置会被保留下来
（3）层级提高，可以把标准文档流中的元素及浮动元素盖在下边
使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量

2.2 绝对定位

特性
（1）绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
（2）元素位置发生偏移后，原来的位置不会被保留
（3）层级提高，可以把标准文档流中的元素及浮动元素盖在下边
（4）设置绝对定位的元素脱离文档流
使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景

2.3 固定定位

特性
（1）相对浏览器窗口来定位
（2）偏移量不会随滚动条的移动而移动
使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等

二、z-index属性

1.z-index属性概念

z-index 属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index属性值：整数，默认值为0
设置了position属性时，z-index属性值可以设置各元素之间的重叠高低。
z-index值大的位于值小的层上方。

z-index概念图

2.示例

html代码

 <div>
  <img src="./day1/练习4：flex布局练习/image/book.jpg" alt="图书" class="img"/>
  <h1 class="text">书名：创新公司</h1>
</div>

css代码1:

<style>
  .text{
      left: 0;
      top: 0;
      position: absolute;
      
      z-index: 1;
  }
  .img{
      height: 200px;
  }
  </style>

当.text的z-index的值设为1时，文字在图片上方

文字在图片上方

css代码2

<style>
  .text{
      left: 0;
      top: 0;
      position: absolute;
      
      /* z-index: 1; */
      z-index: -1;
  }
  .img{
      height: 200px;
  }
</style>

当.text的z-index的值设为-1时，文字在图片下方

文字在图片的下方

三、网页元素透明度

1.opacity属性

值：从0到1（完全透明到不透明），值越小越透明

对背景和文字都能进行透明化