1.粘性定位
sticky 粘性定位:
加粘性点各位要注意的是(父元素一定要有足够的高度)
-
基于⽤户的滚动位置来定位
-
在未滚动出目标区域时,类似 position:relative;
-
当⻚⾯滚动超出⽬标区域时,类似 position:fixed;,它会固定在⽬标位置。
-
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位
这个特定阈值指的是 top, right, bottom 或 left 之⼀,换⾔之,指定 top, right, bottom 或 left 四个阈值其中之⼀,才可使粘性定位⽣效。否则其⾏为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不⽀持 sticky 定位。 Safari 需要使⽤ -webkit- prefix。
.sticky{
position:-webkit-sticky;
position:sticky;
top:0;
background-color:red;
border:2px solid orange;
}
2.层级关系:z-index
z-index:0 ;1
标准流盒子,低于浮动的盒子,浮动的盒子又低于定位的盒子。 定位高于浮动,浮动高于标准流。(高低和占不占位置无关) 给定 z-index 的值为层级的值。(不给默认为0)
3.隐藏元素的六种方式
3.1使用透明度
opacity 让元素和图片半透明【0-1】
具有继承性
可以用来隐藏,但占据空间,可以使用过渡
3.2 使用display
display:none 注意:元素消失,不会占据空间
display:block 显示
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
display:none;
}
</style>
<div class="box"></div>
3.3 使用scale缩放
语法:transform:scale(0) 注意:元素消失,但是还会占据空间,可以用过渡
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
transform:scale(0)
}
</style>
<div class="box"></div>
3.4 使用visibility
visibility:hidden 隐藏
visibility:visible 显示
占据空间, 不可以使用过渡效果
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
visibility:hidden;
}
</style>
<div class="box"></div>
3.5 使用宽高和overflow
宽度或者高度=0,配合overflow hidden;不占据空间,让出原来的位置,可以使用过渡
<style>
.box{
width: 0px;
height: 0px;
background-color: aquamarine;
overflow:hidden;
visibility:hidden;
}
</style>
<div class="box"></div>
3.6 使用position定位
语法:position:absolute; top:-当前元素的高度;left:-当前元素的高度 注意: 元素消失,不会占据空间
不占据空间,可使用过渡(不推荐使用)
<style>
.box{
width: 100px;
height: 100px;
background-color: aquamarine;
position:absolute;
top:-100px;
left:-100px;
}
</style>
<div class="box"></div>
4.光标属性
5.元素垂直水平居中方案
5.1 第一种
.login{
width: 500px;
height: 300px;
background-color: #fff;
border-radius: 30px;
margin: 0 auto;
position: absolute;
top:calc(50% - 150px);
left: calc(50% - 250px);
}
5.2第二种
.login{
width: 400px;
height: 200px;
background-color: #fff;
border-radius: 30px;
/* 元素垂直水平居中方案 */
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}