主要内容:
1.background
2.定位
3.z-index
概要解释:
1.background-image: url(‘链接的图片地址‘); 默认是横向平铺 纵向平普
background-repeat:
repeat:默认
no-repeat:不平铺
repeat-x:
repeat-y:
background-position:x y;
如果为正值 那么表示调整图片的位置
如果为负值 精灵图切图
background-attachment:fixed;
不会随着父盒子的滚动而滚动
background: url(‘‘) no-repeat x y;
2.定位
四种定位:
position
static:静态定位
relative:
相对定位
作用:
1)微调元素
2)可以做"父相子绝"参考
3)如果当前这个标准流的盒子设置了相对定位,那么他跟标准流下的盒子是一样的
参考点:
(1)相对于原来的位置调整位置
记住:
1)不要用相对定位做压盖现象,因为相对定位会"留坑" 占着茅房布拉斯
2)设置定位之后,它的层级大于标准流的盒子
3)相对的盒子不脱离标准流
absolute:绝对定位
现象:
1)脱标
2)做压盖 层级高
(1)参考点
单独设置绝对定位: top描述
参考点: 页面的左上角 (跟浏览器的左上角区分)
单独设置绝对定位: bottom描述
参考点: 浏览器的左下角
(2)当有父子盒子嵌套时参考点:
父辈元素设置相对定位 子元素设置绝对定位 那么子元素是以最近父辈元素(必须设置相对定位)的左上角为参考点来调整位置
绝对定位的盒子居中:
left:50%;
margin-left:负的该盒子宽度的一半
fixed:固定定位
1.脱标
2.层级提高
参考点:浏览器的左上角
应用:固定导航栏 ?广告 回到顶部
只要盒子 设置浮动了 固定定位 绝对定位了
1.脱标
2.可以任意宽高
3.z-index
前提条件:必须设置定位
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
下面是详细的解释:
1 background
下面是背景图的详细解释:
注意工作中通常是用快捷用法:
background: url(‘images/timg.jpg‘) no-repeat 10px 20px;
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>background-img</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.box{ ???????????background-image: url(‘./images/love.jpg‘); ???????????width: 100%; ???????????height: 150px; ???????????background-repeat: no-repeat; ???????????background-position: center top; ???????????/* 这个包括设置背景图,以及不多行平铺,只单行平铺,以及设置背景图居中 */ ???????} ???????.container{ ???????????width: 300px; ???????????height: 400px; ???????????background-color: red; ???????????background-image: url(‘images/timg.jpg‘); ???????????background-repeat: no-repeat; ???????????background-position: 10px 20px; ???????????/* 这个是设置在div中微调背景图的位置 */ ???????} ???????.koutu{ ???????????width: 20px; ???????????height: 30px; ???????????/* background-color: green; */ ???????????background-image: url("images/timg.jpg"); ???????????background-repeat: no-repeat; ???????????background-position: 0 -20px; ???????????/* 这个是对背景图进行切割.获取想要的图片 */ ???????} ???</style></head><body> ???<div class = "box"></div> ???<div class = "container"> ???</div> ???<div class = "koutu"></div> ???</body></html>2.定位
1)相对定位
示例如下:
相对定位要注意的是相对的偏移是相对原位置的偏移.
示例如下:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????div{ ???????????width: 200px; ???????????height: 200px; ???????} ???????.child1{ ???????????background-color: red; ???????} ???????.child2{ ???????????background-color: green; ???????????position: relative; ???????????top: -30px; ??/* 相对于原位置向上偏移30px */ ???????????left: 100px;/* 相对于原位置向右偏移100px */ ???????} ???????.child3{ ???????????background-color: blue; ???????} ???</style></head><body> ???<div class = "child1"></div> ???<div class = "child2"></div> ???<div class = "child3"></div> ???<div class = "child4"></div></body></html>相对偏移的微调数据:
示例如下:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????a{ ???????????text-decoration:none; ???????????color:#172c45; ???????????position: relative; ???????????top: -6px; ???????????/* 这里是根据web上设置的微调 */ ???????} ???????input{ ???????????font-size: 30px; ???????} ???</style></head><body> ???<a href="#">百度一下</a> ???<input type="text"> ???</body></html>相对偏移的重要应用:父相子绝
父相子绝里的边界是父亲的相对定位.
示例:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.father1{ ???????????position: relative; ???????????width: 600px; ???????????height: 200px; ???????????background-color: red; ???????} ???????.father2{ ???????????position: relative; ???????????width: 400px; ???????????height: 100px; ???????????background-color: green; ???????} ???????.child1{ ???????????width: 50px; ???????????height: 50px; ???????????background-color: blue; ???????????position: absolute; ???????} ???????.child2{ ???????????width: 50px; ???????????height: 60px; ???????????background-color: gray; ???????????position: absolute; ???????????top: 30px; ???????????left: 40px; ???????} ???</style></head><body> ???<div class = "father1"> ???????<div class = "father2"> ???????????<div class = "child1"></div> ???????????<div class = "child2"></div> ???????</div> ???</div></body></html>绝对定位:
绝对定位里要注意是:
如果没有父相子绝,那么也就是单独用绝对定位,那么参考点是页面的左上角(这里注意和浏览器的左上角区别开.)
如果用的是bottom的话,那么参考点是浏览器左下面.
绝对定位还有一点要注意到的是,绝对定位怎么使自己居中父盒子.需要如下操作:
left:50%;
margin-left:负的该盒子宽度的一半
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.box{ ???????????width: 200px; ???????????height: 200px; ???????????position:absolute; ???????????left: 40px; ???????????bottom: 10px; ???????????background-color: green; ???????????/* 注意这里的bottem设置是相对于浏览器的底部距离 */ ???????} ???????.test{ ???????????width: 500px; ???????????height: 1200px; ???????????background-color: red; ???????????position: absolute; ???????????top: 30px; ???????????left: 30px; ???????????/* top这里是相对于页面左上角来说的,不管你有没有父标签,只要父标签没有设置父相子绝的话,那么就是相对于页面. */ ???????} ???????.body_test{ ???????????width: 1000px; ???????????height: 1000px; ???????????margin: 40px; ???????????background-color: gray; ???????} ???</style></head><body> ???<div class = "body_test"> ???<div class = "test"></div> ???<div class = "box"></div> ???</div></body></html>固定定位:
固定定位要注意的是,一定要有top和left.
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????div{ ???????????width: 800px; ???????} ???????.box{ ???????????background-color: red; ???????????height: 800px; ???????} ???????.box1{ ???????????background-color: green; ???????????height: 50px; ???????????position:fixed; ???????????top: 30px; ???????????left: 20px; ???????????width: 50px; ???????} ???</style></head><body> ???<div class = "box"></div> ???<div class = "box1"></div></body></html>3.z-index
前提条件必须设置定位,设置定位后所有默认值为0.
前提条件:必须设置定位
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的
4.从父现象：父亲怂了，儿子再牛逼也没用
下面是从父现象的代码:
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style> ???????.father1{ ???????????width: 400px; ???????????height: 400px; ???????????position: relative; ???????????background-color: gray; ???????????z-index: 1; ???????} ???????.father2{ ???????????width: 400px; ???????????height: 400px; ???????????position: relative; ???????????background-color: green; ???????????z-index: 2; ???????} ???????.child1{ ???????????width: 50px; ???????????height: 50px; ???????????background-color: red; ???????????position: absolute; ???????????top: 200px; ???????????left: 450px; ???????????z-index: 3; ???????} ???????.child2{ ???????????width: 50px; ???????????height: 50px; ???????????background-color: blue; ???????????position: absolute; ???????????top: -220px; ???????????left: 450px; ???????} ???</style></head><body> ???<div class = "father1"> ???????<div class = "child1"></div> ???</div> ???<div class = "father2"> ???????<div class = "child2"> ???????????????????</div> ???</div> ???</body></html>css学习background-定位-z-index
原文地址：https://www.cnblogs.com/ahliucong/p/9470503.html