定位： position
1.static 默认值 没有定位
2.relative 相对定位，参照物是自身原来的位置
01. 参照物是自身原来的位置
02. 不会脱离标准文档流，对父级盒子和相邻的盒子不会产生影响
03. 自身之前的位置会保留
3.absolute 绝对定位，参照物是当前盒子的父级
01.参照物是当前盒子的父级
02.父级必须是设置了定位（一般父级都是相对定位）
03.如果找不到祖先元素，以浏览器为参照物
04.会脱离标准文档流，
如果相邻的盒子没有设置定位属性，会产生影响，
如果相邻的盒子设置定位属性，不会产生影响，
05.自身之前的位置不会保留
4.fixed 固定定位，参照物是浏览器
顺序离我们最近的是
fixed > relative > absolute > static
z-index:
设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定位属性</title> <!-- position 01.static ：默认，没有定位！ 离我们最远 02.absolute：绝对定位 001.脱离了标准文档流 002.位置发生变化之后，位置不会被保留!后续元素会顶替之前的位置 003.参照离这个设置了定位属性的最近的父级元素！如果没有 就以浏览器为准 03.relative：相对定位 001.相对于自身原来的位置 002.没有脱离标准文档流 003.位置发生变化之后，位置会被保留 04.fixed：固定定位 相对于浏览器 --> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ height: 50px; width: 50px; } #box{ /*大盒子*/ height: 300px; width: 300px; border: 2px solid red; } #box div:nth-of-type(1){ background: red; /*绝对定位*/ position: absolute; left: 20px; /* 距离父级元素 左边20px*/ } #box div:nth-of-type(2){ background: orange; position:static ;/*默认值*/ } #box div:nth-of-type(3){ background: pink; /*相对定位*/ position: relative; bottom:20px; } #box div:nth-of-type(4){ background: red; /*固定定位*/ position: fixed; left: 30px; top: 30px; } #box div:nth-of-type(5){ /*如果两个盒子设置的定位属性相同，默认按照html结构元素顺序 后面会覆盖前面*/ background: greenyellow; /*固定定位 position: fixed; left: 30px; top: 30px;*/ } /*层级关系 固定定位 > 相对定位 > 绝对定位 > 默认static */ </style> </head> <body> <div id="box"> <div>第1个盒子</div> <div>第2个盒子</div> <div>第3个盒子</div> <div>第4个盒子</div> <div>第5个盒子</div> </div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>z-index属性</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } li{ list-style: none; } #content{ width: 350px; height: 300px; border: 1px solid red; margin: 0px auto; } .tipBg{ /*带背景的*/ background: gray; /*可以使用 rgba*/ opacity: 0.5; filter: alpha(opacity=50);/*解决低版本IE兼容性*/ } .tipBg,.tipText{ /*都需要跑到 图片上去*/ position: absolute; /* 都是绝对定位*/ height: 25px; line-height: 25px; width: 331px; ; top: 102px; } .tipText{ z-index:1;/*设置相同层面的元素 堆叠顺序 默认值 是0 值越大 离我们越近*/ text-align: center; } </style> </head> <body> <div id="content"> <ul> <li><img src="../images/maple.jpg" alt="香山红叶" /></li> <li class="tipText">京秋魅力•相约共赏香山红叶</li> <li class="tipBg"></li> <li>时间：11月16日 星期六 8:30</li> <li>地点：朝阳区西大望路珠江帝景K区正门前集合</li> </ul> </div> </body> </html>