【滑稽】每日一记——CSS定位

/*相对定位 relative
1、使用position: relative 设置元素为相对定位的元素
2、定位机制：相对于自己原来文档流中的位置定位，当不指定top等定位值时，不会改变元素位置；
相对定位元素仍会占据原有文档流中的位置，而不会释放（我不用也不让你用，你能把我咋地）
3、使用top、bottom、left、right调整位置，当left和right同时存在时，left生效，
当 top和bottom同时存在时，top生效
*
* */

 

 

/*绝对定位absolute
1、使用position: absolute 设置元素为绝对定位的元素
2、定位机制：相对于第一个有定位（非static）的祖先元素进行定位；
* 如果所有祖先元素均未定位，则相对浏览器左上角（0，0）点定位；
* 使用absolute定位的元素会从文档流中完全删除，原有空间释放不再占用
*

<div class="div1">
<div class="div1_1">绝对定位</div>
这是第一个div
</div>

.div1{
width: 100px;
height: 100px;
background-color: blueviolet;
position: relative;
top:200px;
left: 200px;
}
.div1_1{
width: 50px;
height: 50px;
background-color: tomato;
position: absolute;
left: 30px;
top: 30px;
}

 

 

 

*
* 绝对定位元素水平居中方式：
* 1、left：50%
* 2、设定margin-left为元素宽度一半的负值

*
* 固定定位:fixed
* position: fixed 是一种特殊的绝对定位，父容器无法使用relative进行锁定
* 定位机制：永远相对浏览器窗口进行定位

<div class="div2">
<div class="div2_1"></div>
这是第二个div
</div>

.div2{
width: 100px;
height: 100px;
background-color: greenyellow;
position: fixed;
top: 50px;
left: 50px;
}

* */

 

* z-index
* 作用：设置定位元素的Z轴层叠顺序
* 使用要求：必须是定位元素才能使用：absolute、relative、fixed
* 使用z-index需要考虑父容器的约束，
* 如果父容器为z-index：auto 则子容器的z-index可以不受父容器的约束，
* 如果父容器z-index进行了设置，则子容器的层叠将以父容器的z-index为准
* （同一父容器内不同子容器，仍可以通过自己的z-index调整层叠关系）；
* z-index：auto 与 z-index：0 的区别
* 1、z-index：auto 为默认值，与z-index：0 处于同一平面
* 2、z-index：auto 不会约束子元素的z-index 层次，
* 而z-index：0会约束子元素必须与父元素处于同一平面
* 3、z-index 相同的层叠关系， 堆放顺序后来者居上
* */

 

CSS clip属性 ：用于裁剪绝对定位元素（absolute、fixed） 裁剪前一定要给元素添加position属性

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

属性值： auto（默认）； shape ：rect（0，60px，200px，0）；inherit

 

CSS负边距 ：

/*CSS负边距的使用:
1、实现块级元素在块级元素的水平垂直居中；比方说网页banner大图水平居中
先将需要居中的元素进行定位，然后：
left：50% margin-left：width/2
top：50% margin-right：width/2
2、可以增加元素宽度，但需要忽略width属性
首先不指定子容器宽度，只写高度
然后，margin：0 50px 可以使子容器左右宽度各增加50 ，然而没啥用
*/

双飞翼布局：需要时详情自行百度 （同样是负边距的使用，不过这个更没啥用）

这不是链接，只是备注：图如果看不懂还是在浏览器里试试吧