css学习background-定位-z-index
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css学习background-定位-z-index，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6519字，纯文字阅读大概需要10分钟。
内容图文
主要内容:
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>
原文：https://www.cnblogs.com/ahliucong/p/9470503.html
内容总结
以上是互联网集市为您收集整理的css学习background-定位-z-index全部内容，希望文章能够帮你解决css学习background-定位-z-index所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。