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

最新推荐文章于 2024-07-18 20:08:49 发布

我是Dreamer啊

最新推荐文章于 2024-07-18 20:08:49 发布

阅读量639

点赞数 1

文章标签： css 定位

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/119061780

版权

前端--002 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中的定位技术，包括静态、相对、绝对和固定定位，以及如何使用left、top等属性调整元素位置。相对定位不脱离文档流，而绝对定位和固定定位则会。固定定位相对于浏览器窗口定位，不受滚动条影响。此外，还讲解了元素层级的概念，通过z-index控制，并探讨了透明度的使用，通过opacity属性设置元素的透明效果。

摘要由CSDN通过智能技术生成

文章目录

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

通过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时，开启固定定位。

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

相同点：

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

不同点：

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

元素的层级

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

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

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>