相对定位、绝对定位、固定定位、元素的层级、透明度

我不是女神ヾ 2022-08-31 11:04 315阅读 0赞

### 文章目录 ###

*   *   *  相对定位
         *  绝对定位
         *  固定定位
         *  元素的层级
         *  透明度

定位：将指定的元素放到页面的任意位置

通过position属性设置定位:

*  position:static;没有开启定位，默认值。
 *  position:relative;开启相对定位。
 *  position:absolute;开启绝对定位。
 *  position:fixed;开启固定定位。

可以使用left、top、right、bottom属性设置元素的位置

*  left表示相对于定位位置左侧的偏移量
 *  to表示相对于定位位置上侧的偏移量
 *  bottom表示相对于定位位置下侧的偏移量
 *  right表示相对于定位位置右侧的偏移量

### 相对定位 ###

当开启相对定位后，不设置偏移量，则元素的位置不会发生任何移动

相对定位相对于元素在文档流中的原来的位置进行定位。

相对定位不会脱离文档流，原始位置会被保留。

相对定位的元素会提高一个层级。

开启定位之后不会改变元素的状态，块和内联不会改变。

--------------------

### 绝对定位 ###

绝对定位开启后，会脱离文档流。

开启绝对定位后，不设置偏移量，则元素的位置不会发生任何移动

绝对定位是相对于离他最近的开启了定位的祖先元素进行定位，如果所有祖先元素都没有开启定位，则相对于页面的左上角进行定位

绝对定位会提升元素的一个层级

left和top不设置和left=0；top=0；不相同

绝对定位会改变元素的状态

块元素变成内联元素，默认宽高被内容撑开

内联元素变成块元素

一般设置绝对定位时，会给其父元素设置相对定位

### 固定定位 ###

当元素的position设置为fixed时，开启固定定位。

固定定位也是一种绝对定位，大部分特征和绝对定位相同

相同点：

1.  元素脱离文档流。
2.  不设置偏移量，默认位置保持不变。
3.  会使元素提升层级。

不同点：

1.  相对于浏览器窗口进行定位。
2.  在浏览器窗口某个位置，不会随滚动条移动。

### 元素的层级 ###

如果元素都开启定位，则会提升层级

默认按照元素从上往下布局顺序，进行层级叠加，越往后层级越高。

z-index可以设置层级，数值越大，层级越高。

没有开启定位的元素，z-index不起作用

父元素层级再高也不会覆盖住子元素。

### 透明度 ###

opactiy：设置元素的透明度，值在0和1之间

0表示完全透明

1表示完全不透明

<!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>
        div{
         
          width: 300px;
          height: 300px;
          background-color: red;
          /* 设置透明度 */
          opacity: 0.2;
        }
      </style>
    </head>
    <body>
      <div></div>
    </body>
    </html>

透明度为0.2

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

透明度为1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

透明度为0时

![在这里插入图片描述][2b71a72b26e346509e8294b16b0f80b0.png_pic_center]

（上方插入了一张图片↑）看不到了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/23ba0e72e1984accb86e3fcff71222df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/54c3a5a81f1945bc8efc4058b2adc1e2.png
[2b71a72b26e346509e8294b16b0f80b0.png_pic_center]: /images/20220829/f2d47978a3e54801bda498fa442f5a4b.png