web前端全系列 教程
1839个小节阅读:2243k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
position
属性指定了元素的定位类型
值 | 描述 |
---|---|
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
其中,绝对定位和固定定位会脱离文档流
设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom
xxxxxxxxxx
<div class="box"></div>
xxxxxxxxxx
.box{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 100px;
}
xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>
xxxxxxxxxx
.box1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
left: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
}
xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>
xxxxxxxxxx
.box1{
width: 200px;
height: 200px;
background-color: red;
position:fixed;
left: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
}
温馨提示
设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档
xxxxxxxxxx
<div class="container">
<div class="box"></div>
</div>
xxxxxxxxxx
.container{
width: 300px;
height: 300px;
background-color: #666;
position: relative;
left: 200px;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
}
z-index
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>
xxxxxxxxxx
.box1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
z-index: 2;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
position:absolute;
z-index: 1;
}
实时效果反馈
1.下列哪种属性设置不会脱离文档流:
A 相对定位
B 绝对定位
C 固定定位
D 浮动
答案
1=>A