【CSS】CSS定位元素

CSS定位元素

1.标准流

默认情况下，元素都是按照标准流进行排布，互相不存在层叠现象
标准流中，可以使用margin和padding对元素进行定位，其中margin可以使用负数
缺点
- 设置一个元素的定位，会影响其他盒子的定位效果
- 不能实现层叠

2.元素的定位

2.1 静态定位

元素按照标准流布局，所有元素的默认定位是static

2.2 相对定位

元素也是按照标准流（normal flow）来布局
可以通过left right top bottom 来对元素进行定位
- 定位参照对象是原来标准流中的位置
可以在不影响其他元素的提前下，对自己进行微调

对图片居中的处理

方法1：利用background-position来进行

html：

html 复制代码

 <div class="box">
</div>

css

css 复制代码

.box {
  height: 498px;
  background-image: url(../images/mhxy.jpg);
  background-position: center;
}

但这样有一个缺点，海报图对于一个网站上很重要的，应该用img标签实现

方法2:利用相对定位

html 复制代码

<div class="box">
  <img src="../images/mhxy.jpg" alt="" />
</div>

css 复制代码

.box {
  height: 498px;
  overflow: hidden;
}
.box img {
  position: relative;
  /* 先向左移动图片长度的一半 */
  left: -960px;
  /* 或利用平移，移动自身的宽度一半 */
  /* transform: translateX(-50%); */
  /* 利用margin移动父元素的一半，使得图片和box两个中心点重合 */
  margin-left: 50%;
}

2.3 固定定位

脱离标准流（normal flow）脱标
可以通过 left、right、top、bottom来进行定位
定位的参照对象是视口
当画布滚动时，固定不动

2.4 定位元素的特点

可以随意设置宽高
宽高默认由内容决定
不再受标准流的约束
- 不再严格按照从上到下、从左到右排布
- 不再严格区分块级、行内级，很多特性都会消失
不再给父元素汇报宽高数据
脱标元素内部还是按照标准流布局

2.5 绝对定位

元素脱标
可以通过left right top bottom来进行定位
- 定位元素参照对象是最相邻的定位祖先元素
- 如果找不到，参考对象为视口
定位元素
- position的值不是static的元素
子绝父相

2.6 绝对定位元素的特性

绝对定位元素：
- position的值为absolute或者fixed的元素
对于绝对定位元素来说
- 定位参考对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际宽度
- 定位参考对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际高度
设置绝对定位元素的宽高和参照元素一致(利用上面的公式可以算出来)
- left:0 right:0 margin:0 top:0 bottom:0
设置绝对定位元素的在参照元素中水平、垂直方向居中显示
- left 0 right 0 top 0 bottom 0 ,margin:auto

设置绝对定位元素的垂直水平居中

html 复制代码

<div class="box">
  <div class="container"></div>
</div>

css 复制代码

.box {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: pink;
}

.box .container {
  width: 100px;
  height: 100px;
  background-color: purple;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

2.7 粘性定位

属性值postion:sticky为粘性定位
粘性定位可以看做是相对定位和固定定位的结合体
设置某个阈值,在到达阈值前可以是相对定位，到达阈值后变成固定定位
stickey是相对于最近的一个滚动视口的（找不到才会选择浏览器滚动视口）

html 复制代码

<div class="box">
  <h1>局部滚动窗口</h1>
  <div class="menu">
    <span1>列标1</span1>
    <span2>列标2</span2>
    <span3>列标3</span3>
  </div>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
    <li>列表7</li>
    <li>列表8</li>
    <li>列表9</li>
    <li>列表10</li>
    <li>列表11</li>
    <li>列表12</li>
    <li>列表13</li>
    <li>列表14</li>
    <li>列表15</li>
    <li>列表16</li>
    <li>列表17</li>
    <li>列表18</li>
    <li>列表19</li>
    ...
  </ul>
</div>

css 复制代码

.box {
  width: 300px;
  height: 500px;
  overflow: auto;
  margin: 100px auto;
}
.box .menu {
  position: sticky;
  /* 阈值，当该元素到滚动视图top尺寸小于等于0时，改为固定定位 */
  top: 0;
  background-color: pink;
}

2.8 z-index属性

z-index的属性可以用来设置定位元素的层叠顺序
- 取值可以为正整数、负整数、0
比较元素
- 如果为兄弟元素
  - z-index的值越大，层级越高
  - z-index相同，后写的元素层级高
- 如果不是兄弟元素、
  - 各自从元素自己以及祖先元素中，找到最相邻的2个定位元素进行比较
  - 并且这两个定位元素必须设置z-index属性

html 复制代码

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

当一个定位元素的层级设置为负整数时，层级没有标准流的层级高

css 复制代码

.box {
  width: 200px;
  height: 200px;
}
.box1 {
  position: relative;
  background-color: pink;
  z-index: -1;
  top: 100px;
}
.box2 {
  background-color: purple;
}
.box3 {
  background-color: green;
}