定位组件使用
2019-02-27 本文已影响0人
九害民
html 定位
普通流定位从上到下从左到右子元素会排列在父容器的element的内部
display 每个元素都有自己的属性平时不推荐改变
常见的为三种 ：
display: inline-block ; 高度宽度都可调试 可以同行
display: block; 高度和宽度可以调试，特点独占一行
display: inline;可以在同一行但是高度和宽度不可调试
// <div>本身的display为 block
<style>
#frist{
font-size: 20px;
width: 300px;
height: 300px;
background-color: #e50b0b;
}
#three{
width: 200px;
height: 200px;
background-color: #7100c8;
font-size: 30px;
display: inline;
}
</style>
<body >
<div id="frist">this a frist
<div id="three">
this a three
</div>
</div >
</body>
1.jpg
加上display: inline;
#three{
width: 200px;
height: 200px;
background-color: #7100c8;
font-size: 30px;
display: inline;
}
2.jpg
将display:变为lnline-block
#three{
width: 200px;
height: 200px;
background-color: #7100c8;
font-size: 30px;
display: inline-block;
}
3.jpg
相对定位position:relative
在普通流的基础上相对偏移
分别关键词 top left 关键字 bottom right进行位置调整
可以理解为存在一个自己的“私有层”相对于自己的原有位置进位移
未设置
<body>
<div id="b">
</div>
<div id="a">
abc<span>ddddd</span>
</div>
</body>
3.jpg
#b{
position: relative;
right: -20px;
font-size: 3em;
height: 100px;
background-color: #e50b0b;
width: 200px;
height: 200px;
}
#a{
position: relative;
top: 60px;
font-size: 3em;
background-color: #7100c8;
width: 200px;
height: 200px;
}
设置后
3.jpg
绝对定位 position：absoult
在普通流中完全消失
位置以在其所在容器的左上角为原点，进行偏移
使用left top botto right进行位置调整
可以理解为有自己的私有层根据容器左上角进行位移
混合应用一下
<div id="b">
<div id="c"> </div>
</div>
<div id="a">
abc<span>ddddd</span>
</div>
#b{
position: relative;
right: -20px;
font-size: 3em;
height: 100px;
background-color: #e50b0b;
width: 200px;
height: 200px;
}
#a{
position: relative;
top: -60px;
font-size: 3em;
background-color: #7100c8;
width: 200px;
height: 200px;
}
#a span{
display: block;
color: cadetblue;
}
#c{
position: absolute;
background-color: #fff;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
}
3.jpg
白色的就是绝对定位可以通过 z-index可以将图层显示 数越大越在上层
我将z-index设置成-1
#c{
position: absolute;
z-index: -1;
background-color: #fff;
top: 10px;
left: 10px;
width: 50px;
height: 50px;
}
3.jpg
让白色方块进入了红色方块的图层下
