首页 > 其他 > 详细

Position定位相关知识了解

时间:2019-06-23 19:55:46      阅读:108      评论:0      收藏:0      [点我收藏+]

一、定位 position属性

    1.默认定位:
        position:static;
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

    2.相对定位:
        position:relative;
            a.相对于原来的位置进行定位
            b.原先位置依然保留(不脱离文档流的定位)
            c.如果为某定位元素父元素的话则基本作为一个定位元素存在

    3.绝对定位:
        position:absoult;
            a.在不设置位置情况下相对于原来位置飘起来 (飘起来和float浮动起来不同)
            b.不保留原先位置(脱离文档流进行定位)
            c.如果有定位的祖先元素,相对于离它最近的定位祖先元素定位
            d.如果没有定位的祖先元素,相对于视口区的左上角进行定位

    4.固定定位
        position:fixed;
            a.固定在浏览器(视口区)的某个位置上(可以对被其遮挡的容器设置margin来显示容器内容)
            b.原先位置不保留(脱离文档流进行定位)
            

    定位元素:使用定位position属性的元素
    定位元素使用以下属性进行位置变化:left、right、top、bottom

    
    z-index 层叠顺序
        值越大越在上层(更优先显示),默认值为0
        绝对定位元素,使用层叠顺序


    文本超出部分产生省略号:
    1.white-space:nowrap;  内部文本不换行,默认为换行
    2.overflow:hidden;  溢出内容隐藏
    3.text-overflow:ellipsis;  省略号(ellipsis)     修剪(clip) 默认的

    浮动、定位块级元素不在独占一行,需要自己设置。

Position定位相关知识了解

原文:https://www.cnblogs.com/nzcblogs/p/11073966.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!