CSS定位元素
1.标准流
- 默认情况下，元素都是按照标准流进行排布，互相不存在层叠现象
- 标准流中，可以使用margin和padding对元素进行定位，其中margin可以使用负数
- 缺点
- 设置一个元素的定位，会影响其他盒子的定位效果
- 不能实现层叠
2.元素的定位
2.1 静态定位
元素按照标准流布局，所有元素的默认定位是static
2.2 相对定位
- 元素也是按照标准流（normal flow）来布局
- 可以通过left right top bottom 来对元素进行定位
- 定位参照对象是原来标准流中的位置
- 可以在不影响其他元素的提前下，对自己进行微调
对图片居中的处理
方法1：利用background-position来进行
html：
<div class="box">
</div>
css
.box {height: 498px;background-image: url(../images/mhxy.jpg);background-position: center;
}
但这样有一个缺点，海报图对于一个网站上很重要的，应该用img标签实现
方法2:利用相对定位
<div class="box"><img src="../images/mhxy.jpg" alt="" />
</div>
.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
设置绝对定位元素的垂直水平居中
<div class="box"><div class="container"></div>
</div>
.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是相对于最近的一个滚动视口的（找不到才会选择浏览器滚动视口）
<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>
.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属性
- 如果为兄弟元素
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
当一个定位元素的层级设置为负整数时，层级没有标准流的层级高
.box {width: 200px;height: 200px;
}
.box1 {position: relative;background-color: pink;z-index: -1;top: 100px;
}
.box2 {background-color: purple;
}
.box3 {background-color: green;
}
