css定位属性

定位(position)

定位是CSS里很重要的一个属性,作用:检索或者设置元素的定位方式(改变元素位置的属性)

其中有很多的属性值也有很多今天就先讲五种定位:

1.  static    静态定位:
static 静态定位是position的默认值,默认文本流的状态,不会识别left right top bottom值指定的坐标。
 
2.  absolute  绝对定位:
a : 参照物:按照已经有定位的父元素进行位置的变化。
b : 假如 当前没有父元素 或者 父元素没有定位的情况下,以整个文档为参照物。
c : 绝对定位,脱离文档流、不占据空间。
d : 可以识别left right top bottom值指定的坐标。
 
3.  relative  相对定位:
a : 参照物:自身默认的位置。
b : 始终占据空间,不会破坏文档流。
c : 可以识别left right top bottom值指定的坐标。
 
4. fixed 固定定位:
a : 参照物:浏览器窗口。
b : 脱离整个文本流。不占据空间。
c : 可以识别left right top bottom值指定的坐标。
 
5. sticky 粘性定位:
position:relative  和 position:fixed的结合。
如果页面没超出窗口范围,按照relative 执行,
如果内容超出窗口位置,按照fixed执行。
可以识别left right top bottom值指定的坐标。
 
定位元素:后定位的元素会把前面定位的盖住。
        z-index:
            控制定位元素的层次关系
            属性值为一个数字(可以为负数),数字越大,层次关系越高
            默认值 auto;
在页面的搭建中经常用到包含块的设置:
       1:如果父元素为参照物:添加 position:relative;
       2: 给要做定位的子元素:添加 position:absolute;
 
运用定位可以很方便的让元素到想要到的地方。
居中的方法:
    让内容在浏览器窗口左右上下居中。
        第一种方法:
            position:fixed;
            left:50%;
            top:50%;
            margin:-高度的一半 0 0 -宽度的一半。
 
        第二种方法:
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;

    利用定位:让子元素在父元素里面左右上下居中
         /* 左右上下的居中 */
        position:absolute;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
 
需要用到定位的地方有很多,这也是一个很灵活的属性,要非常透彻的知道其中的属性才能灵活运用噢。
XP 2020-02-22 15:00:00


 
 
 
 
 
 

相关推荐