Loading

CSS3--四种定位

一、预备知识

定位=定位模式+偏移，可以让盒子自由在某个盒子内移动位置或固定在屏幕中某个位置，并且可以压住其他盒子。

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。

二、相对定位

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

特点：不脱标，偏移后原位置仍然保留。

三、绝对定位(重要)

绝对定位，元素会它最近的一个父类容器去定位，该父类容器position的值必须是：relative、absolute、fixed。

若没有这样的父元素，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。

* {
    margin: 0;
    padding: 0;
}
.height{
    width:750px;
    height:120px;
    background-color: skyblue;
}
.absolute{
    position:absolute;
    width:240px;
    height:240px;
    right:80px;
    bottom:60px;
    background-color: #3c763d;

}
body{
    /*position: relative;*/
}
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute">
  <div class="absolute"></div>
</div>

上述代码的例子，可以看到当height类的div足够多直至出现滚动条时，一开始定位元素出现在右下角并且会发现absolute元素会随滚动轴滚动。

绝对定位的元素不再存在于正常文档布局流中【脱标不占有原先位置】，意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 例如，弹出信息框和控制菜单。

绝对定位的盒子不能通过margin:0 auto实现居中。

1、子绝父相:

  • 子级绝对定位，不会占位置，可以放到父盒子内任何一个地方且不影响兄弟盒子。
  • 父盒子布局时需要占有位置且要加定位限制子盒子在父盒子内显示，只能是相对定位。

 

四、固定定位

不再占有原位置，与绝对定位的工作方式完全相同，主要区别：绝对定位固定元素是相对于 <html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身，导致元素的位置不随页面滚动而变化。

可以用于创建固定的有用的UI项目，如持久导航菜单。

技巧：固定在版心右侧位置

1、固定定位的盒子left:50%,走到浏览器可视区的一半位置

2、该盒子margin-left版心宽度的一半

五、粘性定位

相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起1​​0像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

粘性定位的特点：

  1. 以浏览器的可视窗口为参照系移动元素(固定定位特点)
  2. 粘性定位占有原先的位置(相对定位特点)
  3. 必需添加top、left、right、bottom中的一个才有效

六、z-index

z-index 属性设置元素的堆叠顺序，只能在position属性值为relative，absolute或fixed的元素上有效，值大的元素会在上面。

 

posted @ 2021-12-22 19:59  三淼  阅读(215)  评论(0)    收藏  举报