蘇阿細 - z-index
type: channel
link: https://www.wangchouchou.com/tag/z-index/
items: 定位

定位
type: item
date: 2020-12-04T10:41:00+00:00
description: 5.1 相对定位 相对定位 第一个盒子 第二个盒子 第三个盒子 相对定位：position: relative;相对于原来的位置，进行指定的偏移（它任然在标准文档流中，原来的位置会被保留） top: -10px; bottom: -10px; left: 20px; right: 20px;Demo： Title 链接1 链接2 链接3 链接4 链接5 5.2 绝对定位基于xxx定位：上下左右1、在没有父级元素定位的情况下，相对于浏览器定位2、父级元素定位存在时，相对于父级元素进行偏移3、在父级元素范围内移动相对于父级或浏览器的位置进行指定偏移，绝对定位后，不在标准文档流中，原来的位置不被保留 Title 第一个盒子 第二个盒子 第三个盒子 5.3 固定定位 Title div1 div2 5.4 z-index图层opacity: 0.5; 背景透明度#content{ width: 500px; padding: 0; margin: 0; overflow: hidden; font-size: 18px; line-height: 25px; border: 1px solid black; } ul,li{ padding: 0; margin: 0; list-style: none; } /*父级元素相对定位*/ #content ul{ position: relative; } .tipText,.tipBg{ position: absolute; width: 500px; height: 25px; top: 401px; } .tipText{ color: white; /*z-index: 999;*/ } .tipBg{ background: black; opacity: 0.5;/*背景透明度*/ filter: alpha(opacity=50);/*IE8及以前用filter代替opacity*/ } Title 强风吹拂！ 时间：16点31分 地点：bilibili