前端学习：定位属性

定位属性position

position：absolute；绝对定位，会使元素脱离标准文档流。当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏。有父元素且父元素有定位，则相对父元素定位。

position：relative；相对定位，不会使元素脱离标准文档流。设置后使相对自己的初始位置移动。

一般我们会给父级元素设置相对定位，给子级元素设置绝对定位(子绝父相)，父级设置相对定位如果不设置top，left等属性进行偏移的话，那他就还是会在原来的位置显示，同时作为参照物，为设置了绝对定位的子级元素提供偏移标准。

position：fixed；固定定位，会使元素脱离标准文档流。是相对于用户的可视窗口进行偏移的。作用使可以将元素固定在某一位置，不随窗口滚动而滚动。

position: sticky; 粘性定位。效果就像是excel表格里的窗口冻结。

2.透明属性

Opacity：透明属性，不过这个属性会使元素内包括子级元素的所有内容一起透明。

透明设置也可以使用rgba来设置。不过这都是作用于纯色背景，背景图片透明设置的话可以参考下面方法。

<!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>
        .jk::before {
            content: "";
            background-image: url("../img/01.jpg");
            background-size: 500px 500px;
            background-repeat: no-repeat;
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0px;
            left: 0px;
            opacity: 0.7;
            z-index: -1;
        }
 
        .jk {
            position: relative;
            width: 1539px;
            height: 871px;
        }
    </style>
</head>
<body>
    <div class="jk">天夜叉</div>
</body>
</html>

原文链接：https://blog.csdn.net/buupoo/article/details/125776610