第6章 定位(3)

目标

• 定位
• z-index
• 透明度

定位

四种方式
默认定位static
相对定位relative（做一个参照物）
绝对定位absolute(相对于父类的偏移)
固定定位fixed（固定在指定位置）
如果设置定位方式position属性

**static 标准文档流 **

1213链接
测试默认定位

相对定位relative：相对于我来定位（指有子类的情况下）
他自己还可以参照自己应该在的位置（标准文档流）进行偏移
相对于我（做参照物的情况不用写top left right bottom）
position:relative

如果自身也想偏移，在position的基础上也可以设置上下左右的偏移量

position:realative
top:***
left:
right:
bottom:

绝对定位：参照第一个有定位的祖先元素进行定位，如果祖先元素都无定位，他就参照body进行定位

position:absolute
top:***
left:
right:
bottom:

固定定位：固定在指定位置，不管窗口里面的其他内容是否超出一屏，固定定位的内容都不动，一般用于做网站顶部导航搜索广告

圆角属性
border-radius: 50%; 变圆了
border-top-left-radius: 50%; 可以单独设置在某个方向上圆角
相关代码

练习:做微信消息提示
仅供参考

微信
2

zindex和透明度

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

image

This is a heading

由于图像的 z-index 是 -1，因此它在文本的后面出现。




 








   
12333333

网页元素透明度
CSS设置元素透明度
opacity:x
x值为0~1，值越小越透明
opacity:0.4;

filter:alpha(opacity=x)
x值为0~100，值越小越透明
filter:alpha(opacity=40);

练习 香山红叶

image.png

  

    

    
京秋魅力•相约共赏香山红叶
    

    
时间：11月16日 星期六 8:30
    
地点：朝阳区西大望路珠江帝景K区正门前集合
  




@charset "gb2312";
/* CSS Document */
ul, li {
    padding:0px;
    margin:0px;
    list-style-type:none;
}
#content {
    width:331px;
    overflow:hidden;
    padding:5px;
    font-size:12px;
    line-height:25px;
    border:1px #999 solid;
}
#content ul {
    position:relative;
}
.tipBg, .tipText {
    position:absolute;
    width:331px;
    height:25px;
    top:100px;
}
.tipText {
    color:#FFF;
    text-align:center;
    z-index:1;
}
.tipBg {
    background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
}

div实现

    
        
        
        
    
    
        

            
            

                
                

                
京秋魅力•相约共赏香山红叶
                
            
            
            
            
时间：11月16日 星期六 8:30
            
地点：朝阳区西大望路珠江帝景K区正门前集合
        
    

项目实战 有路网首页轮播图

image.png

    
    
    
    



    
    

        
1
        
2
        
3
    

固定定位