css定位怎么设置

这篇文章主要讲解了“css定位怎么设置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css定位怎么设置”吧！

定位

1.position

• static:positon定位的默认值，没有定位
  设置top跟left无效

• relative:生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative元素的位置通过top、right、bottom、left  控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)
  

上图中我们给father块元素加了一个向左向上各100px的相对定位，father的父元素就是body，所以father相对于body进行偏移，son块元素在加上相对定位后，由于他是在father下的子元素，假如father没有加定位，那么son是相对于body进行偏移的，实际上上图中father有加上定位，所以son是相对于father进行偏移，不是相对bady进行偏移。总结：相对定位都是相对于父元素左上角进行偏移，假如没父元素就一层一层往上找

• absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过top、right、bottom、left  控制
  

首先absolute是相对于static 定位以外的第一个父元素进行定位，浅显说就是相对于有设定位属性，但不包含定位属性为static的父元素进行定位，只需父元素有设定位为relative或者absolute 等等都可以相对其进行定位。其次top跟left是相对于父元素左上角进行定位，right跟bottom是相对于父元素右下角进行定位

• fixed 生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)元素的位置通过top、right、bottom、left  控制
  

通过上图我们给son的父元素加了相对定位，但在给子元素加fixed时我们发现son元素是相对于浏览器窗口进行定位的，父元素对其毫无限制作用

• sticky：它的体现就像position:relative和position:fixed的合体:

浅显说就是在页面不进行滚动时他体现出来的特性就是relative，但当页面进行滚动时他体现出来就是fixed的特性

2.z-index

定义一个元素在文档中的层叠顺序，适用于定义position的元素

当使用定位有多层叠在一起可以通过z-index属性定义来定义什么元素排在最上面,比方有些弹窗显示需要有个蒙层在加弹窗内容，这时需要用定位把蒙层先定位在内容上面进行遮盖，在把弹窗内容定位在蒙层上，这时就需要z-index进行定位什么元素显示在上面，通过设置弹窗的z-inde值大于蒙层的z-index值即可以实现弹窗在蒙层之上

3.clip：定义了元素的哪一部分是可见的。区域外的部分是透明的，适用于绝对定位元素

值为auto时表示对象无剪切，比方一个宽高为100px的元素，clip: rect(auto auto auto auto)跟clip: rect(0px 100px 100px 0px)都表示不会对元素进行剪裁，第一个值表示从上往下剪裁到设定值，为0就是从上面剪裁到0px也就是不剪裁，第二个值表示从右边剪裁到设定值，100就表示从右边剪裁到宽度100px的位置，也就没有剪裁效果

感谢各位的阅读，以上就是“css定位怎么设置”的内容了，经过本文的学习后，相信大家对css定位怎么设置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！