css定位方式总结

css定位方式总结:

1、相对定位(relative):生成相对定位的元素，相对于其正常位置进行定位。

div {
   width: 200px;
   height: 200px;
   background-color: pink;
   
}
.top {

   position: relative; 
   top: 100px;
   left: 100px;
}
.bottom {
   background-color: purple;
}

<div class="top"></div>
<div class="bottom"></div>

2、绝对定位(absolute): 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

body {
   height: 2000px;
}
div {
   width: 100px;
   height: 100px;
   background-color: pink;
   /*position: absolute;
   top: 10px;
   left: 10px;*/
}
.top {
   position: absolute; 
   right: 0;
   bottom: 0;

}
.bottom {
   background-color: purple;
   width: 110px;
}

<div class="top"></div>
<div class="bottom"></div>

3、static:

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

4、fixed:

生成绝对定位的元素，相对于浏览器窗口进行定位。