定位
截图有误：2中是浮动变行级块
无论哪个定位坐标系的原点都是左上角,向右为正x,向下为正y.
默认static,无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的。
一:相对定位
相对自己原来的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding: 0; } .c1{ background-color: green; height: 200px; width: 200px; /* position: relative; left:200px; top:200px; */ } </style> </head> <body> <div class="c1"> </div> </body> </html>
注释打开后,就会相对原来的位置进行移动.
图中是没有定位时的图片和相对定位后的图片结合的截图,从A点移动到了B点.
二:绝对定位
相对已经定位过的父标签,之所以用绝对定位是因为子标签不知道放什么位置,而是相对父标签来进行定位才能精确定位.
如果没有父标签作为基准,就会一直向上找直到body标签.
父标签加个定位属性,至于value随便,只要不用left这些属性来确定位置,定位不会有效果
然后子标签设置为绝对定位,left这些属性值相对于父标签开始换位置.按照父标签的左上角作为原点开始移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding: 0; } .c1{ background-color: green; height: 200px; width: 200px; position: relative; } .c2{ background-color: red; height: 200px; width: 200px; position: absolute; left:200px; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> </body> </html>
三:固定定位
相对于浏览器窗口
无论滚动滚动条,这个始终在浏览器的一个位置.例如返回顶部.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding: 0; } .c1{ height: 200px; width:200px; background-color: red; position: fixed; bottom: 100px; right: 100px; } </style> </head> <body> <div class="c1"> </div> </body> </html>
四:z-index
#i2 {
z-index: 999;
}
设置对象的层叠顺序。
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>自定义模态框</title> <style> .cover { background-color: rgba(0,0,0,0.65); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; } .modal { background-color: white; position: fixed; width: 600px; height: 400px; left: 50%; top: 50%; margin: -200px 0 0 -300px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。改变的是标签的透明度,只要在标签里面的例如文字也会改
而rgb只会改背景颜色,其他改不了
综合示例
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>li标签的float示例</title> <style> /*清除浏览器默认外边距和内填充*/ * { margin: 0; padding: 0; } a { text-decoration: none; /*去除a标签默认的下划线*/ } .nav { background-color: black; height: 40px; width: 100%; position: fixed; top: 0; } ul { list-style-type: none; /*删除列表默认的圆点样式*/ margin: 0; /*删除列表默认的外边距*/ padding: 0; /*删除列表默认的内填充*/ } /*li元素向左浮动*/ li { float: left; } li > a { display: block; /*让链接显示为块级标签*/ padding: 0 15px; /*设置左右各15像素的填充*/ color: #b0b0b0; /*设置字体颜色*/ line-height: 40px; /*设置行高*/ } /*鼠标移上去颜色变白*/ li > a:hover { color: #fff; } /*清除浮动 解决父级塌陷问题*/ .clearfix:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 顶部导航栏 开始 --> <div class="nav"> <ul class="clearfix"> <li><a href="">玉米商城</a></li> <li><a href="">MIUI</a></li> <li><a href="">ioT</a></li> <li><a href="">云服务</a></li> <li><a href="">水滴</a></li> <li><a href="">金融</a></li> <li><a href="">优品</a></li> </ul> </div> <!-- 顶部导航栏 结束 --> </body> </html>
五:总结
浮动的元素脱离文档流,位置会被别的标签抢去.
定位:
1.相对定位不会脱离文档流,位置不会被其他标签抢去.
2.绝对定位脱离文档流.
3.固定定位脱离文档流.
开发流程:先把html的结构搭起来,然后用css一个一个去调整.