CSS定位-学习笔记

写在前面：

CSS属性书写顺序
1. 布局定位顺序：display/position/float/clear/visibilltu/overflow
2. 自身属性：width/height/margin/padding/border/background
3. 文本属性：color/font/text-decoration/text-aligin/vertical-align/white-space/break-word
4. 其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient

什么是定位：
定位是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子
为什么需要定位:
标准流和浮动流无法快速实现盒子的自由移动

定位=定位模式+ 边偏移

定位模式：用于指定一个元素在文档中的定位方式。
通过CSS的position属性设置，值分为五个：
如图：

下面分别介绍这五种属性：

1. static 静态定位
   语法：position : static；
   特性：
   按照标准流特性摆放位置，没有边偏移
   静态定位在布局时很少用到
2. relative 相对定位
   语法：position : relative；
   特性：
   以自身位置为中心移动，和浏览器、父盒子所在位置无关。
   原位置仍然保留，后面的盒子仍然以标准流的方式对它（即后面的盒子不动{停职留薪}）。典型应用是限制绝对定位的。

<!--样式代码-->
<style>
	.box1{
		position: relative;
		top: 100px;
		left: 100px;
		width: 200px;
		height: 200px;
		background-color: pink;
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color: deeppink;
	}
</style>
<!--页面代码-->
<div class="box1"></div>
<div class="box2"></div>

3. absolute 绝对定位
   语法：position : absolute ；
   特性：
   移动位置是相对于父元素来说
   如果没有父元素或者父元素没有定位，则以浏览器为准定位（Document文档）。

<!--样式代码-->
<style>
	.father{
		/*父亲没定位，仍然以浏览器为准*/
		width: 500px;
		height: 500px;
		background-color: skyblue;
	}
	.son{
		position:absolute;
		/*左下角*/
		left: 0;
		bottom: 0;
		width: 100px;
		height: 100px;
		background-color: pink;
	}
</style>
<!--页面代码-->
<div class="father"></div>
<div class="son"></div>

如果父元素有定位（相对、绝对、固定定位），则以最近一级的有定位父盒子作为参考点移动位置。

<!--样式代码-->
<style>
	.father{
		/*父亲有定位，定位位置以父盒子位置为准*/
		position: relative;
		width: 500px;
		height: 500px;
		background-color: skyblue;
	}
	.son{
		position:absolute;
		/*左下角*/
		left: 0;
		bottom: 0;
		width: 100px;
		height: 100px;
		background-color: pink;
	}
</style>
<!--页面代码-->
<div class="father">
	<div class="son"></div>
</div>

如果父盒子没有定位。祖父盒子有定位，则定位以祖父盒子位置为准

<!--样式代码-->
<style>
.grandfather{
		/*相对定位*/
		position: relative;
		width: 800px;
		height: 800px;
		background-color: hotpink;

	}
	.father{
		width: 500px;
		height: 500px;
		background-color: skyblue;
	}
	.son{
		position:absolute;
		/*左下角*/
		left: 0;
		bottom: 0;
		width: 100px;
		height: 100px;
		background-color: pink;
	}
</style>
<!--页面代码-->
<div class="grandfather">
	<div class="father">
		<div class="son"></div>
	</div>
</div>

子盒子以最近的并且带有定位父盒子作为参考移动位置。
绝对定位不占有位置

子绝父相：子级使用绝对定位，父级则需要相对定位。因为父亲必须要占有位置，所以必须用相对定位，子盒子不保留位置，可以使用绝对定位。

4. fixed 固定定位
   固定定位是固定于浏览器可视区的位置。主要适用场景：可以在浏览器页面滚动时元素的位置不会改变。
   语法：position : fixed；
   特点：
   1. 以浏览器的可视窗口做为参照点来移动元素。跟父元素没有任何关系；不随着滚动条的滚动而滚动。
   2. 固定定位不占有原来的位置。
      固定定位可以理解为一种特殊的绝对定位

<!--样式代码-->
<style>
    .jpg {
        position: fixed;
        top: 0;
        right: 0;
    }
</style>
<!--页面代码-->
<div class="jpg">
	<img src="img/img.jpg" alt="">
</div>

紧贴版心：
固定在版心右侧位置
1. 让固定定位的盒子left:50%走到浏览器可视区（也可看作版心）的一半位置
2. 让固定定位的盒子margin-left版心宽度的一半距离。多走版心宽度的一半位置就能让固定定位的盒子贴着版心右侧对齐了。

<!--样式代码-->
<style>
	.w{
		width: 800px;
		height: 1400px;
		background-color: pink;
		margin: 0 auto;
	}
	.fixed  {
		position: fixed;
		/*走浏览器宽度的一半*/
		left: 50%;
		/*利用margin 走版心盒子的一半距离*/
		margin-left: 400px;
		width: 50px;
		height: 150px;
		background-color: skyblue;
	}
</style>
<!--页面代码-->
<div class="fixed">固定定位</div>
<div class="w">版心盒子 800px</div>

5. sticky 粘性定位
   粘性定位可以被认是相对定位和固定定位的混合
   position: sticky ; top:10px;
   特点：
   1. 以浏览器的可视窗口作为参照带你移动元素（固定定位特点）
   2. 粘性定位占有原先的位置（相对定位特点）
   3. 必须添加 top、bottom、left、right 边偏移其中一个才会生效
      跟页面滚动搭配使用。兼容性较差，不支持IE

<style>
<!--样式代码-->
 body{
      height: 3000px;
  }
  .nav{
      /*粘性定位*/
      position:sticky;
      /*当元素距离浏览器可视区的距离变成0像素的时候，定位从相对定位改为粘性定位*/
      top: 0;
      width: 800px;
      height: 50px;
      background-color: pink;
      margin: 100px auto;
  }
</style>
<!--页面代码-->
<div class="nav">导航栏</div>

补充：
边偏移则决定该元素的最终位置，有top、bottom、left、right 四个属性。
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底端偏移量，定义元素相对于其父元素下边线的距离
left 左端偏移量，定义元素相对于其父元素左边线的距离
right 右端偏移量，定义元素相对于其父元素右边线的距离