关于CSS中的定位position的相关笔记

最新推荐文章于 2022-11-28 17:53:15 发布

XIao___FAN

最新推荐文章于 2022-11-28 17:53:15 发布

阅读量303

点赞数 1

分类专栏：笔记文章标签： css 前端 css3 html html5

本文链接：https://blog.csdn.net/XIao___FAN/article/details/121786537

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在做着网页作业的小范，呆滞的看着设计稿上的图片位置，然后无能狂怒，“焯，这东西怎么调到这个地方的啊！”在给学长发微信之后，学长笑着说，“用定位啊，赶紧去学吧。”小范立马溜了溜了。

定位

定位是一种更加高级布局手段，通过定位可以将元素摆放到页面的任意位置。

通过position属性来设置定位

定位元素不会影响其他元素

可选值：

static 默认值，元素是精致的没有开启定位

relative 开启元素的相对定位

absolute 开启元素的绝对定位

fixed 开启元素的固定定位

sticky 开启元素的粘滞定位

-相对定位（relative

-当元素的position属性值设置为relative时则开启了元素的相对定位

-相对定位的特点：

1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

2.相对定位是参照其文档流原位置进行定位的

3.相对定位会提升文档流的层级

4.相对定位不会使元素脱离文档流

5.相对定位不会改变元素的性质，块还是快，行内还是行内

-绝对定位（absolute

-当元素的position属性值设置为absolute时，则开启了元素的绝对定位

-绝对定位的特点：

1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

2.开启绝对定位后，元素会从文档流中脱离

3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

4.绝对定位会使元素提升层级

5.绝对定位元素是相对于其包含块进行定位的

-包含块（containing block

-正常情况下，包含块就是离当前元素最近的祖先块元素

-在开启绝对定位后，包含块就是离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则根元素就是它的包含块，

html（根元素，初始包含块）

-偏移量

-当元素开启了定位以后，可以通过偏移量来设置元素的位置

定位元素垂直方向上的位置由top与bottom决定，通常只使用其中之一：

top 定位元素和其上边的距离越大越靠下

bottom 定位元素和其下边的距离越大越靠上

定位元素水平方向上的位置由right与left决定，通常只使用其中之一：

left 定位元素和其左边的距离越大越靠右

right 定位元素和其右边的距离越大越靠左

-固定定位

-将元素的position属性设置为fixed则开启了元素的固定定位

-固定定位也是一种绝对定位，所以固定定位绝大部分特点都和绝对定位一样

唯一不同的是固定定位永远参照与浏览器的视口（网页的可视区域）进行定位

固定定位的元素不会随网页的浮动条浮动

简单来说，固定定位的应用就是比如我们经常能在页面上左右两端看到的小广告，无论页面如何滚动，他都会在该位置。

-粘滞定位

-当元素的position属性设置为sticky时则开启了元素的粘滞定位

-粘滞定位何相对定位的特点基本一致

但不同的时粘滞定位可以在元素到达某个位置时将其锁定（比如一些页面的导航条，导航框之类的）{IE出来挨打}（兼容性不太好）

水平布局

在之前盒模型的学习中，我们知道，盒子内的水平布局是由七个元素共同决定的

直达链接： CSS盒模型笔记_XIao___FAN的博客-CSDN博客

当我们开启了绝对定位后：

水平方向的布局等式就需要添加left和right两个值

当发生过渡约束：

如果九个值没有auto，则调整right

如果有auto，则让设置auto的值使其满足

因为left和right默认值时auto，所以如果不设置left和right，在等式不满足时，会调整left和right使其满足，使其能够水平居中。

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: relative;/*开启相对定位*/
        }
        .box2{
            background-color: blue;
            width: 50px;
            height: 50px;
            margin-left: auto;/*自动调整*/
            margin-right: auto;/*自动调整*/
            position: absolute;/*开启绝对定位*/
            right:0;/*设置为0*/
            left:0;/*设置为0*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

垂直布局

top+margin+padding+border+bottom=height等式{margin border padding都含有bottom和top}

垂直居中

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: relative;/*开启相对定位*/
        }
        .box2{
            background-color: blue;
            width: 50px;
            height: 50px;
            margin-bottom: auto;/*自动调整*/
            margin-top: auto;/*自动调整*/
            position: absolute;/*开启绝对定位*/
            bottom: 0;/*设置为0*/
            top: 0;/*设置为0*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

同时当我们两个都使用时，我们就能够让它水平居中

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            position: relative;/*开启相对定位*/
        }
        .box2{
            background-color: blue;
            width: 50px;
            height: 50px;
            margin-left: auto;/*自动调整*/
            margin-right: auto;/*自动调整*/
            margin-bottom: auto;/*自动调整*/
            margin-top: auto;/*自动调整*/
            position: absolute;/*开启绝对定位*/
            bottom: 0;/*设置为0*/
            top: 0;/*设置为0*/
            right: 0;/*设置为0*/
            left: 0;/*设置为0*/
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>