CSS_定位

1.相对定位

  position:relative;

  (1)不脱离标准文档流,可以调整元素

  (2)以原来的位置为参考点

position: relative;
/*设置为相对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

2.绝对定位

  position:absolute;

  (1)脱离标准文档流,不在页面占位。

  (2)层级提高,压盖现象。

  (3)参考点,相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面的根元素左上角进行定位。

  推荐:子绝父相,子元素用绝对位置,父亲元素用相对定位。

position: absolute;
/*设置为绝对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

3.固定定位

  position:fixed;

  (1)脱离标准文档流。

  (2)一旦设置固定定位,在页面中滚动网页,位置固定不变。

  (3)参考点为浏览器的左上角。

  应用:小广告、回到顶部、固定导航栏。

position: fixed;
/*设置为绝对定位*/
top: 30px;
/*向下移动30像素*/
left: 100px;
/*向右边移动100像素*/

 4.z-index:

  当给元素设置了定位,则会存中z-index属性,默认值为auto,当多个设置了定位的元素,z-index值大的元素在上面。

  如果父级标签,设置了z-index属性,则子标签跟随父标签的z-index级别。

posted @ 2020-03-18 22:45  手可摘星辰。  阅读(141)  评论(0编辑  收藏  举报