定位网页元素position

static：默认值，没有定位

没有定位，以标准流方式显示
relative：相对定位

third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
    position:relative;
    right:20px;
    bottom:30px;
}

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

相对定位元素的规律
[1] 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
[2] 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
[3] 设置相对定位的盒子原来的位置会被保留下来
示例
设置第二个盒子右浮动，再设置第一、第二盒子相对定位

#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position:relative;
    right:20px;
    bottom:20px;}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
    float:right;
    position:relative;
    left:20px;
    top:-20px;}

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

absolute：绝对定位
偏移设置： left、right、top、bottom

绝对定位小结
[1] 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
[2] 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
[3] 绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响
[4] 元素位置发生偏移后，它原来的位置不会被保留下来

image.png

#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
    position:absolute;
    right:30px;
}

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

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

*示例：带按钮的轮播广告

<!--html-->
 <header>
        <nav>
            <div class="bgp">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </nav>
    </header>

<!--css-->
* {
    padding: 0;
    margin: 0;
}

.bgp {
    width: 500px;
    height: 200px;
    background-image: url(../image/adver-01.jpg);
    background-repeat: no-repeat; /*背景3图片不重复*/
    position: relative;
}

ul {
    text-align: center;
    position: absolute;
    right: 90px;
    top: 100px;
}

ul li {
    height: 18px;
    width: 18px;
    border-radius: 50px;
    list-style: none;
    display: inline-block;
    border: 1px solid #000000;
    background-color: white;
    line-height: 18px;
    font-size: 10px;
}

fixed：固定定位
偏移设置： left、right、top、bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

<!--html-->
<div class="wrap">
        <p>hello</p>
        <div class="box">返回顶部</div>
    </div>

<!--css-->
.wrap{
    height: 1000px
}
.box{
    height: 100px;
    width: 100px;
    background: red;
    position: fixed;
    bottom: 100px;
    right: 100px;
}

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

z-index属性

[1] 调整元素定位时重叠层的上下位置
[2] z-index属性值：整数，默认值为0
[3] 设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
[4] z-index值大的层位于其值小的层上方
网页元素透明度

opacity:会将字体透明度也改变掉，通常使用rgba

示例

<!--html-->
<body>
    <div>
        <ul>
            <li>
                <img src="./image/maple.jpg" alt="">
            </li>
            <li>
                京秋魅力.相约共赏香山红叶
            </li>
            <li>
                
            </li>
            <li>
                时间：11月16日 星期六 8:30
            </li>
            <li>
                地点：朝阳区西大望路珠江帝景K区正门前集合
            </li>

        </ul>
    </div>
</body>

<!--css-->
* {
    margin: 0;
    padding: 0;
}

body div {
    margin-top: 20px;
    margin-left: 20px;
    height: 185px;
    width: 336px;
    border: 1px solid gray;
    padding: 5px;
}

ul {
    margin: 0 auto;
    /* border: 1px solid green; */
    width: 330px;
    position: relative;
}

ul li {
    list-style: none;
    font-size: 13px;
}

ul li:nth-child(2) {
    margin: 0 auto ;
    line-height: 20px;
    height: 20px;
    position: absolute;
    top: 100px;
    left: 80px;
    color: white;
  
}
ul li:nth-child(3) {
    width: 331px;
    line-height: 20px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    /* 使用rgba代替opacity:x */
    z-index: 1;
    position: absolute;
 
    top: 95px;
}ul li:nth-child(4) {
    line-height: 35px;
    height: 20px;
}
ul li:nth-child(5) {
    line-height: 40px;
    height: 20px;
}