admin管理员组文章数量:1610841
position 的注意点与使用场景
position有四个属性
1.static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明),相当于没有定位,基本上用不到这个属性。
2.relative:位置被设置为 relative 的元素,可将其移至相对于其原来位置的地方,原来的位置遗留空白区域。
3.absolute 位置设置为 absolute 的元素,可位置相对于最近的已定位父元素(一般与用),如果元素没有已定位的父元素,那么它的位置相对于window。已定位的元素会脱离文档流(相当于浮动),不占据空间。
4.fixed 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。对于浏览器的位置是固定的。
position定位的元素的位置可以用通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
但我们也可以用transform: translate()对其位置进行调整,两者有何区别?
left right top bottom定位的使用:必须定义在position属性的元素下使用
定位机制:相对于父元素的位置进行定位。
使用方式 left:20px 或者left:50%,前者是距离父元素20px,后者是距离父元素宽度50%的距离。
注意点: 一般left和right在一个样式是只能使用其一,不能left和right都设置,要么使用left就不使用right,要么使用right就不使用left,如果left和right均使用将会出现兼容问题,一个对象设置了靠左left多少距离,自然右边距离自然就有了所以无需设置左边,相同道理,top和bottom对一个对象只能使用其一。
transform属性应用于元素的2D或3D转换,transform: translate()则是transform中的一种2D平面移动,无需在position属性的元素下使用。
定位机制:相对于自己原来位置进行移动。
使用方式transform: translate(20px) 或者transform: translate(50%),前者是向左移动20px,后者是向左移动自己元素宽度的50%的距离。
注意点:多个transform属性添加在同一元素时后声明的会覆盖前面的,而不是原来的基础上再次移动。
div{
width: 100px;
height: 100px;
background: red;
transform: translate(-100px);//向左移动100px
transform: translate(100px);//向右移动100px
}
结果是向右移动100px而不是回到原点。
再给多个不同位置的相同元素定位时 用left right top bottom定位会把所有元素重叠而transform则不会。
position :fixed 运用场景:
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告,功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(登陆注册界面)
4.全屏背景(图片,视频等)
//全屏视频背景
video{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: -9;
}
版权声明:本文标题:position 的注意点与使用场景 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728606223a1165491.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论