当前位置：网站首页>五种定位——粘性定位

五种定位——粘性定位

2022-08-10 00:03:00 【青山酒温如南】

五种定位：

position:static;  
position:relative;
position:absolute;
position:fixed;
position:sticky;
static:静态定位，常规定位。此时top，bottom，left,right和z-index属性无效。
relative：相对定位。不改变页面布局下调整元素位置。
absolute：绝对定位。将元素移出常规文本流（即不为元素预留空间），相对于最近的非static定位的祖先元素偏移，可以设置外边距且不会与其他边距合并。通常使用时注意子绝父相。
父元素{
    
  position:relative;
}
子元素{
    
  position:absolute;
  top:10px;
  left:50px;
}
fixed：视口定位。将元素移出常规文本流（即不为元素预留空间），使元素相对于屏幕视口的位置来指定元素位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。
sticky:粘性定位。元素根据常规文本流定位，相对他的最近滚动祖先（nearest scrolling ancestor）和最近块级祖先，包括table-related元素进行偏移，且偏移不会影响其他元素。且也会创建新的层叠上下文。
层叠上下文：可以用z-index控制上下的。原理是对HTML元素构建一个三维思想，由屏幕引申到眼睛的一条Z轴。
原网站

版权声明
本文为[青山酒温如南]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_51855957/article/details/125725115

边栏推荐

猜你喜欢

随机推荐