欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css之定位

程序员文章站 2022-05-23 12:35:19
定位分为4种方式:静态定位,相对定位,绝对定位 静态定位:position:static 相对定位:position:relative 根据自身原来的位置定位,没有脱离标准流 绝对定位:position:absolute 1.定位的元素没有父元素的情况下,根据浏览器的可视区域定位; 2.定位的元素有 ......

定位分为4种方式:静态定位,相对定位,绝对定位

静态定位:position:static

相对定位:position:relative

  根据自身原来的位置定位,没有脱离标准流

绝对定位:position:absolute

  1.定位的元素没有父元素的情况下,根据浏览器的可视区域定位;

  2.定位的元素有父元素,父元素无定位(或父元素有静态定位),根据浏览器可视区域定位;

  3.定位的元素有父元素,父元素有定位(非静态),根据父元素定位;

固定定位:position:fixed

  根据浏览器可视区域定位,与父元素无关

定位的元素如果要在父元素中垂直水平居中:

  top:50%     margin-top: -(定位元素高度的一半);

  left:50%     margin-left: -(定位元素宽度的一半);

层级:z-index  只能给定位的元素添加  默认值:auto

  数值越大,层级越高,盒子越靠上