css 中的定位position

css 的定位与浮动,在前端的页面布局中是非常重要的,所以深入理解定位和浮动是每一个前端人员必须要掌握的,接下来就来谈一谈css中的定位与浮动的特性,以及他们在实际项目中的应用场景.

首先,我们先来了解一下定位(position),在css中,position=定位属性+边偏移,关于定位一共有5种类型,分别是: 1.静态定位:static 静态定位其实就是浏览器默认的定位,就是标准流,也没有边偏移. 2.相对定位:relative ,相对定位是不脱标的定位,偏移是相对于自身原来的位置进行偏移,是相当自恋型的. 3.绝对定位:absolute,绝对定位是脱标的,也就是说,元素元素移动走以后,不再占有原来的位置,绝对定位,元素在移动位置的时候,是相对于他的祖先元素来移动位置的. 如果没有祖先元素,他是相对于浏览器来进行位置偏移的; 如果有祖先元素,但是祖先元素没有定位,那么决定定位元素还是以浏览器为准; 如果祖先元素有定位,则遵循就近原则,也就是以最近的有定位的祖先元素为参照物进行偏移; 4.固定定位:fixed ,固定定位脱标,是以浏览器的可视窗口为参照物进行偏移,偏移后,不会随着浏览器的的滚动而滚动; 5.粘性定位:sticky,元素脱标,相对于浏览器的可视窗口为参照物进行偏移,必须至少有一个偏移量才能有效果,比如sticky:top:50%,出现的效果是黏性定位的元素,在滚动到距离浏览器顶部还有50%的位置的时候,不再随之浏览器的滚动而滚动,但是,由于黏性定位对于IE浏览器兼容性很差,所以在实际项目的中,一般是通过js进行控制,而不经常使用.

接下来我们聊一下定位在实际项目中的运用场景:

场景1:利用定位让元素居中水平对齐,代码如下:

.box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; background-color: pink; } 场景2:元素有叠放次序,就需要用到定位,只有定位的盒子z-index属性才会有效果.

场景3:让一个元素漂浮在另一个元素之上,比如浮标和遮罩层都会用到子绝父相的定位和布局,遮罩层的代码如下:

<div class="father">
    <div class="mask"></div>
</div>

.father{
    position:relative
    top:0;
    left:0;
    width:200px;
    height:200px;
}
.mask{
    position:absolute;
    top:0;
    left:0;
    display:none;
    width:200px;
    height:200px;
    background:rgba(0,0,0,.3);
}
当鼠标滑过father的时候,出现遮罩层
.father:hover .mask{
    display:block;
}