标签：知识点 盒子 定位 color background position CSS 200px
CSS定位的学习
为什么要学习定位？
在学习之前，我们要思考一下，定位出现的意义是什么，有什么用呢？
我们学习定位之前学习了浮动，但是我们会发现许多效果难以实现，比如说京东首页的轮播图的左右箭头：
然后往下拖，发现顶部和右侧的定位栏会固定在屏幕上：
看完这些相比对定位的存在的原因有了一定的了解了吧。
什么是定位呢？
定位，可以让一个盒子在另一个盒子的内部自由移动，想定到什么位置就定到什么位置。
定位 = 定位模式 + 边偏移
定位模式：决定盒子的定位方式，通过position属性来设置，可以分为四个值：
position: static(静态定位)
position: relative(相对定位)
position: absolute(绝对定位)
position: fixed(固定定位)
边偏移：定位的盒子最终要移动的位置，分为 top、bottom、right、left四种
top: 距离父元素顶部的距离
bottom: 距离父元素底部的距离
right: 距离父元素右边的距离
left: 距离父元素左边的距离
static 静态定位（了解即可）
静态定位就是默认的定位方式，即无定位。
语法格式：
选择器{
position: static;
}
因为是默认的定位方式，所以该定位模式没有边偏移，在平时也很少用到。
relative 相对定位
相对定位就是以自我为中心，相对于自己原来的位置进行定位移动
语法格式：
选择器{
position: relative;
}
假设蓝色盒子在大盒子的居中位置（两条线是模拟坐标线），给蓝盒子加上相对定位
这时如果加上top: 100px; 让它相对自己原来的位置进行偏移，它就会相对于与自己原来的位置进行偏移：
而如果再加上left: 100px, 它又会相对于原来的位置进行偏移：
相对定位的盒子不像浮动元素，就算偏移离开了原来的位置，原来的位置仍保留占有，旁边的盒子仍然以标准流的方式对待它：
我们先定义两个盒子，效果如下
<style>
div {
width: 200px;
height: 200px;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
</style>
<div class="red"></div>
<div class="pink"></div>
然后给红色盒子定义相对定位，并进行偏移,红色盒子离开了，但是粉色盒子依旧老老实实的呆在原来的位置，不敢因为红色盒子离开了就占领它的地盘
.red {
background-color: red;
position: relative;
top: 300px;
left: 300px;
}
绝对定位 absolute
相对于加了相对定位的父元素进行偏移，如果没有父元素或者父元素没有相对定位，则以浏览器为准进行偏移
选择器{
position: absolute;
}
我们定义一个盒子，盒子会紧贴着浏览器的左上边：
<style>
body {
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div></div>
这时给盒子添加绝对定位并设置偏移量，此时没有任何父元素作为标准，它只能以浏览器作为标准进行偏移,效果如下：
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
当盒子有父元素同时父元素又有相对定位时，盒子会相对父盒子进行偏移：
<style>
.dad {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
margin: 0 auto;
}
.son {
width: 50px;
height: 50px;
background-color: red;
}
</style>
<div class="dad">
<div class="son"></div>
</div>
这时给盒子添加绝对定位并设置偏移量：
.son {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 100px;
right: 100px;
}
当盒子的“爸爸”和“爷爷”都有相对定位时，以最近一级的父元素为准。
绝对定位一旦偏移离开，则不再占有原来的位置，脱离文档流。
先定义2个盒子：
<style>
div {
width: 200px;
height: 200px;
}
.div1 {
background-color: pink;
}
.div2 {
background-color: skyblue;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
然后给第一个盒子加上绝对定位并设置偏移量，粉色盒子离开了原来的位置后，脱离文档流，下面的蓝色盒子就挤了上去：
.div1 {
background-color: pink;
position: absolute;
top: 30px;
left: 30px;
}
利用相对定位和绝对定位做一个简易的轮播图轮廓，效果非常丑。。。主要是运用所学的定位知识去练习：
<style>
.box {
width: 500px;
height: 300px;
border: 2px black solid;
margin: 200px auto;
/* 给轮播盒子相对定位 */
position: relative;
}
.box div {
width: 20px;
height: 20px;
line-height: 20px;
background-color: gray;
/* 给左右箭头绝对定位 */
position: absolute;
/* 设置小盒子垂直居中 */
top: 50%;
transform: translateY(-10px);
text-align: center;
}
/* 左箭头定位在左边 */
.left {
left: 0;
}
/* 右箭头定位在右边 */
.right {
right: 0;
}
/* 给小圈圈绝对定位 */
ul {
margin: 0;
position: absolute;
bottom: 10px;
}
ul li {
float: left;
margin-right: 20px;
}
</style>
<div class="box">
<!-- 左箭头 -->
<div class="left"><</div>
<!-- 右箭头 -->
<div class="right">></div>
<!-- 轮播图下的小圈圈 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
fixed固定定位
固定定位是元素固定在浏览器的可视区域的位置。
语法：
选择器{
position: fixed
}
什么是可视区域呢？假如我们打开CSDN，浏览器最大化状态下，这个是可视区域
当我们缩小浏览器时，这块是可视区域
固定定位有几个特点：
- 与父元素无关
- 页面滚动不影响定位
- 不占有位置
定义了一个粉色盒子，给它加上固定定位并设置了偏移量，尽管把浏览器放大缩小，或是把浏览器向下滑动，盒子始终在可视区定位的位置，而且也不占用空间，把 p 文字压住了。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
top: 100px;
left: 30px;
}
</style>
<div></div>
<p>我是个p</p>
<p>我是个p</p>
....
<p>我是个p</p>
对自己学习到的定位知识进行整理，如果有什么遗漏或者错误，欢迎指正！
标签：知识点,盒子,定位,color,background,position,CSS,200px 来源： https://blog.csdn.net/weixin_46647170/article/details/117509879
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。