定位

约 245 字小于 1 分钟

2025-06-26

提示

子级绝对定位，父级相对定位

布局

.box {
  position: absolute;
  right:20px;
  bottom: 20px;
  width:300px;
  height:200px;
}

水平居中时

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left:-100px;
  margin-top:-50px;
  width:200px;
  height:100px;
}

更简洁的写法

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height:100px;
  transform: translate(-50%,-50%);
}

.box {
  position: relative; /* 保留自己位置，不会影响到其他盒子 */
  top:1px;
  left: 2px;
  height:200px;
  width: 300px;
}

.box {
  position: fixed;
  width: 200px;
  height: 100px;
}

注

粘性定位是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位

nav {
  position: sticky;
  top: 0; /* 必须设斋top/bottom/left/right的值 */
  width: 100px;
  height: 100px;
  background-color: red;
}

.box {
  position: absolute;
  z-index: 2;
}

把网页中一些背景图片整合到一张图片文件中，再用background-position精确定位出背景图片的位置

2025/6/26 22:42

查看所有更新日志

版权归属：passwordgloo