cssZ-index,背景图片，权重

来源：互联网发布：javascript基础语法编辑：程序博客网时间：2024/06/04 20:14

Z-index就是z轴的方向。

<!DOCTYPE html><!--z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。--><!--注释：元素可拥有负的 z-index 属性值。--><!--注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！--><!--position为relative或absolute或fixed才起作用，static不起作用--><!--http://www.w3school.com.cn/cssref/pr_pos_z-index.asp--><!--http://www.fx114.net/qa-6-305787.aspx--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>         *{             padding: 0;             margin: 0;         }         .mydiv1{             position: fixed;             width: 100px;             height: 100px;             background-color: #00A000;             top: 0px;             lef: 0px;             z-index: 1;         }        .mydiv2{            position: fixed;            width: 100px;            height: 100px;            background-color: #219161;            top: 50px;            left: 50px;            z-index: 2;        }    </style></head><body><div class="mydiv1"></div><div class="mydiv2"></div></body></html>

<!DOCTYPE html><!--背景尺寸背景居中--><!--参考http://www.w3school.com.cn/cssref/pr_background-size.asp--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        html,body{            width: 100%;            height: 100%;        }        *{            margin: 0;            padding: 0;        }        /*最外层的div要设置宽高100% 100%，则要给html,body宽高都设置成100%*/        .mydiv1{            width: 100%;            height: 100%;            /*设置背景图片，x y 轴都不重复*/            background: url("images/img01.jpg")no-repeat;            /*设置背景尺寸*/            background-size: 100% 100%;            /*背景居中*/            background-position: center;        }    </style></head><body>   <div class="mydiv1">   </div></body></html>
<!DOCTYPE html><!--权重--><!--第一等：style，代表内联样式，如: style=””，权值为1000。--><!--第二等：ip，代表ID选择器，如：#content，权值为100。--><!--第三等：class，代表类，伪类和属性选择器，如.content，权值为10。--><!--第四等：元素，代表类型选择器和伪元素选择器，如div p，权值为1。--><!--权值越大，优先级越高,优先执行style,在执行ip,在执行class,在执行元素--><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #mydivip{            width: 100px;            height: 100px;            background-color: #AA22FF;        }        .mydivclass{            width: 100px;            height: 100px;            background-color: #00A000;        }        div{            width: 100px;            height: 100px;            background-color: #005599;        }    </style></head><body>    <div id="mydivip" class="mydivclass" style=" width: 100px;            height: 100px;            background-color: red;">        <p id="red">这个段落是红色。</p>        <p>人的生命是有限的，可是为人民服务是无限</p>    </div></body></html>

0 0