html中的定位以及透明属性笔记和实现骰子点数例子

定位

给定元素
实现侧边导航栏 以及网页中的广告
语法：
position: fixed 固定定位+边偏移量才能达到想到达的位置
实现效果：div或者某些元素固定在页面的某个位置
移动时的参照物：浏览器当前窗口
可以让内容脱离标准文档流（文字图片都可以被覆盖）
position:sticky 粘性定位
实现效果(移动时的参照物)：如果前面有元素并且元素有高度，那么他会划过元素高度之后再执行定位，如果前面元素没有货高度小于top后面的属性值 他直接开始固定定位
可以做吸顶效果，兼容不好
可以让内容脱离标准文档流（文字图片都可以被覆盖）
position:absolute 绝对定位
实现效果(移动时的参照物)：如果父级元素有定位，则根据父级元素位置进行移动，如果没有则逐级向上看，如果找不到就根据浏览器窗口进行定位
可以让内容脱离标准文档流（文字图片都可以被覆盖）
position:relative 相对定位
实现效果(移动时的参照物)：根据自身的位置开始定位

例子：用position:relative相对定位制作一个三个点面向的骰子
body部分：

<div class="box">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

css部分：

		.box {
            width: 500px;
            height: 500px;
            border: 2px solid black;
            margin: auto;
             border-radius: 20px;   /*边框的圆角程度 */
        }
        .box1,.box2,.box3 {
            width: 100px;
            height: 100px;
            background-color: black;
            border-radius: 50%;   /*边框的圆角为50%就是圆 */
        }
        .box1{
            position: relative;  /*相对定位，按自己的位置定位 */
            left: 400px;  
        }
        .box2{
            position: relative;
            left: 200px;  /*向右移200px */
            top: 100px;  /*向下移100px */
        }
        .box3{
            position: relative;
            top: 200px;
        }

    实现效果图（只是简单定位，没有考虑美观效果）：

透明属性设置

opacity:0.value; (value取值范围：0-1 如0.3)