CSS基础——3.CSS盒子模型、浮动、定位

CSS盒子模型：

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid blue;
  margin: 10px;
}

CSS浮动：

.float-left {
  float: left;
  clear: left; /* 清除左侧浮动影响 */
}
 
.float-right {
  float: right;
  clear: right; /* 清除右侧浮动影响 */
}

CSS定位：

.relative {
  position: relative;
  top: 10px;
  left: 20px;
}
 
.absolute {
  position: absolute;
  top: 50px;
  right: 30px;
}
 
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}
 
.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; /* 当向下滚动超过元素顶部与视口顶部的距离时，元素将固定 */
}

CSS z-index 层叠顺序：

.box1 {
  position: relative;
  z-index: 1;
}
 
.box2 {
  position: relative;
  z-index: 2; /* 在box1之上 */
}