CSS的定位
作者：互联网
定位
1. 引入：
- 浮动可以让多个块级盒子一行没有缝隙排列实现，经常用于横向排列盒子
- 定位则是让盒子自由的在某个盒子里移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子
2. 定位的组成
定位也是在摆放盒子，按定位的方式移动盒子
定位=定位模式+边偏移
- 定位模式：position属性
用于指定一个元素在文档中的定位方式
position：static 静态定位
position: relative 相对定位
position: absolute 绝对定位
position : fixed 固定定位 - 边偏移： （以像素为单位，可以取正负值）
用于指定一个元素在文档中的最终位置
top: 顶端偏移量 定义元素相对于其父元素上边线的距离
bottom: 地端偏移量 定义元素相对于其父元素下边线的距离
left: 左端偏移量 定义元素相对于其父元素左边线的距离
right: 右端偏移量 定义元素相对于其父元素右边线的距离
position：static 静态定位 （了解）
是默认的定位方式，就是无定位的意思
它是按照标准流特性来摆盒子，没有边偏移
position: relative 相对定位
- 它是相对于自己原来的位置来移动的
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式待他原来的位置（不脱标，继续保留原来的位置）
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
position: relative;
left: 100px;
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<body>
<div class="one">
</div>
<div class="two"></div>
</body>
position: absolute 绝对定位
1 . 它是相对于它的祖先元素来说的
2.** 若没有祖先元素或祖先元素没有定位，则以浏览器为准来定位**
3.若祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的祖先元素为参考来移动位置
4. 不再占有原先的位置（脱标）
子绝父相（子级用绝对定位，父级用相对定位）
子级用绝对定位，不会占有位置，可以放到父级盒子里的任何一个地方
父盒子加定位来限制子盒子在父盒子中显示
父盒子布局时，需要占有位置，则父级用相对定位
相对定位经常用来做绝对定位的父级
position : fixed 固定定位
- 以浏览器的可视窗口为参照来移动元素， 就可以实现在浏览器页面滚动时元素的位置不会改变
- 不再占有原先的位置
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
position: fixed;
left: 400px;
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<body>
<div class="one">
</div>
<div class="two"></div>
- 想要固定在版心的右侧位置：
先让固定定位的盒子left：50% 走到浏览器可视区（又称版心）的一半位置
在让固定定位的盒子 margin-left:版心宽度的一半距离
就可以让固定定位的盒子贴着版心的右侧对齐了
<style>
.one {
width: 400px;
height: 400px;
background-color: burlywood;
margin: 0 auto;
/* 盒子水平居中对齐 */
}
.two {
width: 100px;
height: 100px;
background-color: chartreuse;
position:fixed;
/* 先让固定定位的盒子left：50% ,走浏览器宽度的一半*/
left:50%;
/* 让固定定位的盒子 margin-left:版心宽度的一半距离 */
margin-left:200px;
}
</style>
<body>
<div class="two">想要固定在版心的右侧位置的盒子</div>
<div class="one">版心盒子</div>
<!-- 要注意两个盒子的上下的顺序 -->
```标签：定位,盒子,元素,版心,position,CSS,left 来源： https://www.cnblogs.com/yang123-456/p/15450315.html