position 定位

最新推荐文章于 2024-05-07 14:55:18 发布

一只天马行空的飞猪

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量555

点赞数 1

分类专栏： CSS学习笔记文章标签： visual studio code css 前端 chrome

本文链接：https://blog.csdn.net/weixin_46149357/article/details/119065702

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

定位（position）简介：

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

使用position属性来设置定位

- 可选项：

static 默认值，元素是精致的，没有开启定位（只要不是static都是开启了）

relative 开启元素的相对定位

absolute 开启元素的绝对定位

fixed 开启元素的固定定位

sticky 开启元素的粘滞定位

- 相对定位：

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

- 相对定位的特点：

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

2、相对定位是参照于元素在文档流中的位置进行定位的

3、相对定位会提升元素的层级

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

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

- 偏移量（offset）

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

top : 定位元素和定位位置上边的距离

bottom：定位元素和定位位置下边的距离，

1）定位元素垂直方向通常由top和bottom两个属性来控制，通常情况下我们只会使用其一

2）top 值越大，定位元素越往下移动

3）bottom值越大，定位元素越往上移动

4） left: 定位元素和定位位置的左侧距离

5）right: 定位元素和定位位置的右侧距离

定位元素水平方向的位置由left和right两个属性控制，通常情况下只会使用一个

left越大，元素越靠右

right越大，值越靠左

定位和margin最大的区别：margin会影响到其他元素布局，会把其他元素一起往下挤，偏移量不会，只会改变开启定位的元素的位置

注意：偏移量只适用于定位元素，开启定位才可以设置偏移量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>

box1向右移动100px,向下移动100px

- 绝对定位：

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

绝对定位的特点：

1、开启绝对定位后，如果不设置偏移量元素的位置不会发生变化（说明元素的其他性质可能会变）

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

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

4、绝对定位会使元素提升一个层级

5、绝对定位是相对于其包含块进行定位的

包含块（containing block）：

1）正常情况下：

包含块就是离当前元素最近的祖先块元素（包括父元素）

2）绝对定位的包含块

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

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

下面代码，这时，box3以根元素为包含块，原始坐标为屏幕原点，向下移动20px

<style>
        .box1{
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
        }

        .box2{
            
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box3{
            width: 70px;
            height: 70px;
            background-color: violet;
            position:absolute;
            top: 20px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <div class="box2"></div>
    <div class="box4"></div>

以父元素box1为包含块，box1向下移动300px,box2也跟随向下移动，top设置为0

  <style>
        .box1{
            /* 给box1开启定位，于是box3以box1的原点为起始原点 */
            position: relative;
            top: 300px;
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
        }

        .box2{

            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box3{
            width: 70px;
            height: 70px;
            background-color: violet;
            position:absolute;
            /* 设置top为0px, 贴紧顶部 */
            top:0px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box3"></div>
    </div>
    <div class="box2"></div>
    <div class="box4"></div>

效果如下：

-固定定位

将元素的position属性设置为fixed

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

唯一不同的是：固定定位永远参照浏览器的视口进行定位

固定定位不会随着网页的滚动条滚动，是固定在窗口的某个位置上

注意：兼容性不好ie6不兼容

-粘滞定位

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

粘滞定位和相对定位的特点基本一致，不同的是：

粘滞定位可以在元素达到某个位置时将其固定。

float和position: absolute的区别：

position: absolute会导致元素脱离文档流，被定位的元素等于在文档中不占据任何位置，在另一个层呈现，可以设置z-index。PS的图层效果就是position: absolute。

　　float也会导致元素脱离文档流，但还在文档或容器中占据位置，把文档流和其它float元素向左或向右挤，并可能导致换行。图片的文字环绕布局效果就是float。

一只天马行空的飞猪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
position 定位

定位（position）简介：定位是一种更加高级的布局手段，通过定位可以将元素摆到页面的任何位置使用position属性来设置定位- 可选项： static 默认值，元素是精致的，没有开启定位（只要不是static都是开启了） relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位- 相对定位： ...
复制链接

扫一扫