标签：定位 color 元素 100px height background position CSS

一、position 的四个值：static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

二、relative定位与absolute定位的区别

1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

<template>
  <div>
    <div class="box1">box1box1box1box1box1box1box1box1 </div>
    <div class="box2">box2box2box2box2box2box2box2box2 </div>
    <div class="box3">box3box3box3box3box3box3box3box3  </div>
    <div class="box4">box4box4box4box4box4box4box4box4  </div>
    <div class="box5">box5box5box5box5box5box5box5box5 </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.box1{
    height: 100px;
    background-color: red;
}
.box2{
    height: 100px;
    background-color: green;
    position: relative;
    left: 50px;
    top:50px
}
.box3{
    height: 100px;
    background-color: blue;
}
.box4{
    height: 100px;
    background-color: yellow;
}
.box5{
    height: 100px;
    background-color: cyan;
}



</style>

2、absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

• 说明：元素在没有定义宽度的情况下，宽度由元素里面的内容决定，效果和用float方法一样。

<style lang="less" scoped>
.box1{
    height: 100px;
    background-color: red;
}
.box2{
    height: 100px;
    background-color: green;
    // position: relative;
    left: 50px;
    top:50px
}
.box3{
    height: 100px;
    background-color: blue;
}
.box4{
    height: 100px;
    background-color: yellow;
}
.box5{
    height: 100px;
    background-color: cyan;
    position: absolute;
}



</style>

absolute定位原理剖析：

1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。

.box5{
    height: 100px;
    background-color: cyan;
    position: absolute;
    left: 50px;
    top: 50px;
    
}

2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。

<template>
  <div>
    <div class="container0">最外层容器1</div>
    <div class="container1">第二次容器2</div>
    <div class="container2">
      <div class="box1">box1box1box1box1box1box1box1box1</div>
      <div class="box2">box2box2box2box2box2box2box2box2</div>
      <div class="box3">box3box3box3box3box3box3box3box3</div>
      <div class="box4">box4box4box4box4box4box4box4box4</div>
      <div class="box5">box5box5box5box5box5box5box5box5</div>
      第三层容器
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.container0{
    height: 900px;
    position: absolute;
    background-color: #005599;
}
.container1{
    height: 700px;
    position: relative;
    background-color: #00b4f5;
}
.container2{
    height: 500px;
    position: relative;
    background-color: #2D7091;
}



.box1 {
  height: 100px;
  background-color: red;
}
.box2 {
  height: 100px;
  background-color: green;
  // position: relative;
  left: 50px;
  top: 50px;
}
.box3 {
  height: 100px;
  background-color: blue;
}
.box4 {
  height: 100px;
  background-color: yellow;
}
.box5 {
  height: 100px;
  background-color: cyan;
  position: absolute;
  left: 50px;
  top: 50px;
}
</style>

总结

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

标签：定位,color,元素,100px,height,background,position,CSS
来源： https://www.cnblogs.com/luoking/p/16068646.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。