CSS定位

定位

1. 相对定位

    
    

    
    





    
第一个盒子
    
第二个盒子
    
第三个盒子

相对定位的偏移指的是距离指定方向的距离，如right:10px指的是距离右侧10px，即向左偏移10px

相对定位：position:relative;

top: -20px;
left: 20px;
bottom: 10px;
right: 20px;

相对定位的话，它仍然在标准文档流中，原来的位置会被保留

2. 绝对定位

定位：基于XXX定位，上下左右

1. 没有父级元素定位的前提下

基于浏览器定位

2. 假设父级元素存在定位

我们通常会相对于父级元素进行偏移

3. 在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

    
    

    
    





    
第一个盒子
    
第二个盒子
    
第三个盒子

3. 固定定位

    
    

    




div1
div2

4. z-index

图层

z-index：默认是0，最高是无限，数字越大优先级越高

/*背景透明度*/
opacity: 0.5;

    
    
    




    

        

            
            
这是一张背景图片
            

            
时间：2020-8-4
            
地点：XXXXXXX
    

#content{
    width: 380px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
/*子级元素相对于父级元素绝对定位*/
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 640px;
}
.tipText{
    color: wheat;
    z-index: 999;
}
.tipBg{
    background: black;
    /*背景透明度*/
    opacity: 0.5;
    /*下面的写法只有IE8之前的浏览器支持，如果项目有可能在老的浏览器上进行，最好两个都写*/
    filter: alpha(opacity=50);
}