CSS定位
定位分类
1.static 静态定位 (定位的默认属性,没有效果,不脱离标准文档流)
2.relative 定位
3.absolute 定位
4.fixed 定位
5.sticky 定位
css设置定位 模式 position+位置 上下左右 top bootom left right
相对定位(relative )
1.相对定位元素原来的标准文档流位置还会依旧存在!!
2.设置的位置距离是基于该相对定位元素本身位置
.div1{
position: relative;
left: 30px;
top: 30px;
height: 200px;
width: 200px;
background-color: #ccc;
}
.div2{
height: 200px;
width: 200px;
background-color:blue;
}
<div class="div1"></div>
<div class="div2"></div>
绝对定位(absolute )
1.绝对定位在标准文档流中的位置会被覆盖
2.位置距离是基于浏览器或者**有定位的父亲、祖先元素 **(父相子绝)
基于浏览器:
.div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
<div class="div1"></div>
<div class="div2"></div>
基于有定位的父元素
.div1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
}
.father{
width: 500px;
height: 500px;
background-color: yellow;
position: relative;
left: 50px;
top: 50px;
}
固定定位(fixed )
基于浏览器位置设置
生成绝对定位的元素,相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值,就可以将该元素固定在页面固定的位置,通常用来显示一些提示信息,脱离文档流;
在可视区域的中间显示:
/*居中效果
让盒子本身居中到浏览器中间( left 50%盒子左边线居中了)
让盒子中线居中到浏览器中间(margin-left -??px盒子一半的宽度)*/
.div1 {
position: fixed;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background-color: #ccc;
}
.container {
width: 1200px;
height: 800px;
margin: 0 auto;
background-color: pink;
}
<div class="div1"></div>
<div class="container"></div>
贴在可视区域的右边:
/*贴着可视区域右侧(像广告弹窗、电商右侧导航栏>
让盒子本身居中到浏览器中间(left 50%盒子左边线居中了)
让盒子左左线走到可视区域的右边线(margin-left 可视区域的一般距离)*/
.div1 {
position: fixed;
left: 50%;
margin-left: 600px;
width: 200px;
height: 200px;
background-color: #ccc;
}
.container {
width: 1200px;
height: 800px;
margin: 0 auto;
background-color: pink;
}
<div class="div1"></div>
<div class="container"></div>
层叠关系(z-index)
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
z-index:xxx 设置显示的层级,z-index越大,显示的先靠前,也就是用户看到的优先级越高
z-index的使用
(1)必须在定位元素(position:relative/absolute/fixed/sticky)上才有效
(2) 可以有负值
(3)不同父元素的子元素之间进行显示时,会根据父级元素的z-index进行渲染.
z-index不起作用的几种情形
(1)当前设置z-index元素的父元素position:relative/absolute;
(2) 当前设置z-index元素为浮动元素。
和浮动的重点区别(关于文字)
1.定位元素(绝对定位或固定定位)会压住标准文档流元素的内容
2.浮动元素不会压住后面标准文档流元素的内容