CSS定位

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.浮动元素不会压住后面标准文档流元素的内容