z-index定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
说明
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="day114.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--name="viewport"为了适应手机端--> </head> <body> <div>这是最底层的页面内容</div> <div class="cover"></div> <div class="modal"> <h1>登录页面</h1> <p>username:<input type="text"></p> <p>password:<input type="text"></p> <button>注册</button> </div> </body> </html>
body{ margin: 0; } .cover{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 99; } .modal{ background-color: white; height: 200px; width: 400px; position: fixed; left: 50%; top: 50%; z-index: 100; margin-left: -200px; margin-top: -100px; text-align: center; }
opacity定义和用法
opacity 属性设置元素的不透明级别。默认值为1。rgba只能影响颜色,而opacity可以修改颜色和字体(元素)。
margin 0 auto什么作用与语法重点介绍教程
margin:0 auto作用语法:
1、margin:0 auto介绍
margin:0 auto 设置对象上下间距为0,左右自动。
可拆分: margin:0 auto 0 auto(上下)
还可拆分为:margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
2、作用
对DIV设置margin:0 auto样式,是为了让DIV在浏览器中水平居中。布局居中、水平居中,均加入margin:0 auto即可。
关节点:auto(自动、自适应)
假如一个DIV我们设置宽度为500px,然后设置margin:0 auto样式后,假如你浏览器窗口宽度为1000px宽,这个时候此DIV靠左和靠右间距为(auto)这个时候浏览器会自动辨析DIV靠左和靠右各250px宽度间距,此时这个DIV盒子自然而然就水平居中浏览器中。
为什么要设置margin:0 auto?
设置此样式让DIV布局水平居中于浏览器中,目的就是兼容各大浏览器让布局居中。如果不加margin:0 auto CSS样式,会造成布局在有的浏览器中居中有的浏览器靠左。
禁:如果要让DIV布局居中浏览器中,加入margin:0 auto就不能加入float浮动样式,避免逻辑错误,造成布局居中不兼容。