28、定位问题

最新推荐文章于 2020-07-20 17:46:09 发布

五仁卤鸡翅

最新推荐文章于 2020-07-20 17:46:09 发布

阅读量176

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106979207

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
相对定位
绝对定位
固定定位
粘滞定位
绝对定位元素的位置

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

相对定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

 1、定位（position）
     - 定位是一种更加高级的布局手段
    -  通过定位，可以将一个元素，摆放到页面任意位置
    -  使用position 属性设置定位
       可选值
          - static 默认值，元素是静止的没有开启定位
          - relative 开启元素相对定位
          - absolute 开启元素的绝对定位
          - fixed 开启元素的固定定位
          - sticky 开启元素的粘滞定位
     
 2、相对定位
       - 元素的position 属性设置为relative 时开启了元素的相对定位
       - 相对定位特点
           1、元素开启相对定位后，如果不设置偏移量，元素不会发生任何变化
           2、相对定位是参照与元素在文档流中的位置进行定位的
           3、相对定位会提升元素层级，
           4、相对定位不会使元素脱离文档流
           5、相对定位不会改变元素的性质，块还是块，行内元素还是行内元素
           
      - 偏移量（offset）
          - 当元素开启了定位以后，可以通过偏移量来设置元素的位置，不会影响其它元素
             top 
               - 定位元素和定位位置上边距离
             bottom
               - 定位元素和定位位置下边距离
               - 定位元素垂直方向由top 和bottom两个属性控制
                  通常情况下，只会使用一个
             left
                - 定位元素和定位位置左侧距离
             right
                - 定位元素和定位位置右侧距离
                - 水平方向由两个属性控制，通常只会使用一个    
                   

body{
    font-size:60px
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
}
.box2{
    width:200px;
    height:200px;
    background-color:orange;
    position:relative;
    left:200px;
    top:-200px;
}
.box3{
    width:200px;
    height:200px;
    background-color:yellow;
}


</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

</body>
</html>

绝对定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1、绝对定位
     -当元素的position属性值，设置为absolute，则开启了元素的绝对定位
    - 绝对定位特点
      1、开启绝对定位后，如果不设置偏移量，元素位置不会发生变化
      2、开启绝对定位后，元素会从文档流中脱离
      3、绝对定位会改变元素的性质，行内元素变成块元素，快的宽高 被内容撑开
      4、绝对定位会使元素提升一个层级
      5、绝对定位元素是相对于其包含快进行定位
    
      包含快（containing block）
        正常情况下:
           包含快就是离当前元素最近的祖先块元素
       
        - 绝对定位的包含块:
           包含块就是离它最近的开启了定位的祖先元素
             如果所有的祖先元素都没有开启定位，则相对于根元素进行定位
             根元素就是它的包含快
                 - html(根元素，初始包含块)
                  
      
                   
*/
body{
    font-size:60px
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
}
.box2{
    width:200px;
    height:200px;
    background-color:orange;
    position:absolute；
    left:0;
    top:0; 
}
.box3{
    width:200px;
    height:200px;
    background-color:yellow;
}


</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

</body>
</html>

固定定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1、固定定位
      - 将元素的position 属性设置为fixed则开启了元素的固定定位
      - 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
        唯一不同的是，固定定位永远参照浏览器的可视窗口进行定位
        固定定位的元素，不会随网页的滚动条滚动
  
                                    
*/
body{
    font-size:60px
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
}
.box2{
    width:200px;
    height:200px;
    background-color:orange;
    position:fixed； 
}
.box3{
    width:200px;
    height:200px;
    background-color:yellow;
}


</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

</body>

粘滞定位

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1、粘滞定位
     - 当元素的position 属性设置位sticky时开启了元素的粘滞定位
     - 粘滞定位和相对定位特点基本一致，不同的是可以在元素到达某个位置时
       将其固定   
                                    
body{
    font-size:60px
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
}
.box2{
    width:200px;
    height:200px;
    background-color:orange;
    position:fixed； 
}
.box3{
    width:200px;
    height:200px;
    background-color:yellow;
}


</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

</body>

绝对定位元素的位置

html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

.box1{
    width:500px;
    height:500px;
    background-color:#bfa;
    position:relative;
}

 // 水平居中，设置绝对定位，left\right设置为0
 // margin-left、margin-right设置为auto
.box2{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto
    
}

 // 垂直居中,绝对定位后
 // top、bottom设置为0，margin-top、margin-bottom设置为auto
.box2{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto
    
}

// 垂直、水平 居中
.box2{
    width:100px;
    height:100px;
    background-color:orange;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin-left:auto;
    margin-right:auto；
    margin-top:auto;
    margin-bottom:auto
    
}

1、开启定位后
  水平布局
    left+margin-left+border-left+padding-left+width+padding-right+
    border-right+margin-right+right = 包含快的内容区的宽度
    
  当我们开启了绝对定位后
     -水平方向的布局等式需要添加left 和 right两值
      此时规则和之前一样只是多添加了两个值，
       当发生过度约束：
         如果 9 个值中没有 auto ,则自动调整right 以使等式满足  
         如果有auto,则自动调整 auto的值以使等式满足
      - 可设置 auto的值
          margin  width  left  right   
       
      - 因为 left 和 right 的值默认是auto  ,所以如果不知道left 和right 
        则等式不满足时，会自动调整这两个值  
        
2、垂直方向布局的等式也必须要满足
      top+marign-top/bottom+padding-top/bottom+border-top/bottom=
       包含块内容区的高度       




</style>
<body>
<div class="box1">
   <div class="box2"></div>
</div>
</body>