CSS-position定位属性

cendy-LL

已于 2023-11-05 12:36:45 修改

阅读量151

点赞数 1

分类专栏： HTML+CSS 文章标签： css 前端

于 2023-11-04 18:42:43 首次发布

本文链接：https://blog.csdn.net/2301_80864686/article/details/134221686

版权

HTML+CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML/CSS中的position属性及其各种定位类型（静态、相对、绝对、固定和粘性），包括它们的含义、属性值、配合使用方式以及特殊情况，同时对比了定位与浮动的区别，提供了多个实际应用案例。

摘要由CSDN通过智能技术生成

position定位属性

一、Position定位相关属性值

1、定位理解：定位就是让元素在布局的过程在进行位置的偏移, 相对于自己的位置, 或者是其他元素的位置进行调整

2、定位种类：静态定位, 相对定位, 绝对定位, 固定定位, 粘性定位

3、定位属性：position属性

4、定位配合：偏移属性—top, right, bottom, left

5、定位分类具体讲解

（1）静态定位

含义：普通文档流定位，元素是怎么排列就怎么排列
属性：position
属性值：static 默认值，实际开发时不适用
注意事项：无论怎么跟偏移属性都不会改变位置

（2）相对定位

含义：相对定位指的是相对于自己的位置进行微调，参照物为自己的位置
属性：position
属性值：relative
    top:取值为正数时，盒子向下走，即盒子距离原来顶部有对应数值的距离
    left：取值为正数时，盒子向右走，即盒子距离原来左边有对应数值的距离
    bottom:取值为正数时，盒子向上走，即盒子距离原来底边有对应数值的距离
    right：取值为正数时，盒子向左走，即盒子距离原来右边有对应数值的距离
实际开发的时候，经常使用的是left和top，所有元素的基准点都是左上角

（3）绝对定位

含义：
    （1）子元素使用绝对定位，父元素有定位（一般是相对定位），则位置调整是相对于父元素左上角进行位置的改变
    （2）子元素使用绝对定位，父元素没有定位，这次子元素位置的调整是根据上一层的元素判断有定位属性，则参照最近的一层进行位置调整，如果外面所有层都没有定位，则参照浏览器左上角的body位置
属性：position
属性值：absolute
顺口溜：子绝父相

（4）固定定位

含义：让元素相对于浏览器窗口进行位置的显示
参照物：当前浏览器窗口左上角
应用场景：返回置顶、广告、楼梯层、遮罩层
属性：position
属性值：fixed

（5）粘性定位

含义：粘性定位是相对定位和固定定位的结合体，当页面元素发生滚动的时候，实现了对应的吸附效果，也叫作滚动吸顶
属性：position
属性值：sticky

二、定位的特殊情况

1、绝对定位父元素，是否能使用其他定位

父元素可以使用其他1的定位：相对、绝对、固定

2、绝对定位的兄弟关系

绝对定位（固定定位）添加后，不占页面空间，会脱离文档流，后面的元素上去补位置

3、父元素没有高度的时候，绝对和固定定位高度塌陷

相对定位不会脱离文档流，不会产生高度塌陷
绝对定位和固定定位会脱离文档流，不占页面空间，导致后面元素上去补位置，产生了高度降低的效果，这种效果被称之为高度塌陷

4、定位转换成块级元素

绝对定位和固定定位能改变元素类型

5、都添加定位的层级效果

如果只给一个元素添加定位，其余元素没有定位的话，则定位元素会遮盖住没有定位的元素
如果所有的元素都添加了定位的话，默认的是后面的遮盖住前面的效果
如果不想让后面的遮盖前面的，则可以调整遮盖的层级顺序
    属性：z-index  ----应用在已有定位的元素上
    属性取值：纯数值，无单位 ，数值越大，层级越高(不区分正数还是负数)
        默认值为auto(后面的覆盖前面的，等价于0)

6、给自适应的盒子添加定位有哪些特殊情况

添加绝对定位（固定定位）：会让自适应失效，但是仍然让盒子处于自适应的状态，需要被文本撑开，文本越多，撑开的距离越大

7、给margin:0 auto的元素添加绝对和固定定位

margin:0 auto; 的元素添加绝对定位和固定定位会让其失效
margin:0 auto; 只会对页面中的元素起作用，即对标准文档流里的元素起作用

注意：

1、如果 position 属性为absolute ，包含块就是由它的最近的 position 的值不是 static（也就是值为fixed, absolute, relative或sticky）的祖先元素

2、如果 position 属性是fixed，包含块是 viewport（视口）浏览器当前窗口

8、定位使用场景

（1）静态定位：默认值，始终不会使用

（2）相对定位：出现微调的时候会使用该定位

（3）绝对定位：出现大调的时候会使用该定位，使用时遵循子绝父相的写法

（4）固定定位：实现广告栏、楼梯层、遮罩层等效果

（5）粘性定位：主要做滚动吸顶的效果

三、透明属性

1、透明属性写法：

opacity:value;、
    (value的取值范围  0-1 0.1,0.2,0.3-----0.9---1)
注意：
    兼容其他浏览器，但无法兼容低版本IE浏览器

2、IE浏览器写法：

filter:alpha(opacity=value);取值范围 0-100

四、定位和浮动的区别

1、不同点

1、概念不同：
    浮动：半脱离文档流, 当补位元素中存在文本的时候会出现环绕效果
    定位：全脱离文档流, 当补位元素中存在文本的时候不会出现文本环绕, 会直接被前面的元素覆盖
2、用途不同：
    浮动应用于：布局让块级元素横向显示
    定位应用于：调整元素的位置

2、相同点

1. 都会触发BFC
2. 都会改变元素类型
3. 都会让margin:0 auto失效
4. 让自适应宽度的盒子继续自适应
5. 都会脱离文档流
6. 都会让后面的元素上去补位置

五、定位应用

1、相对定位案例显示

分析：在开发过程中若要用到微调时，可使用相对定位进行微调

示例：对下拉框的倒三角进行位置调整

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 150px;
            height: 50px;
            border: 3px solid gray;
            text-align: center;
            line-height: 50px;
        }
        span {
            /* 转换元素类型 */
            display: inline-block;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top: 5px solid black;
            /* 使用定位调整倒三角位置 */
            position: relative;
            top: 3px;
            left: 10px;
        }
    </style>
</head>
<body>
    <!-- 相对定位使用时，仅限于微调 -->
    <div>
        订购房间
        <span></span>
    </div>
</body>
</html>

图片：

2、绝对定位案例显示1

分析：在开发过程中若要用到大的调整时，可使用绝对定位，使用时遵循子绝父相的原则

示例：实现一个简单的轮播图

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            width: 500px;
            height: 400px;
            border: 10px solid gray;
            margin: 100px auto;
            position: relative;
        }

        .box>img {
            width: 100%;
            height: 100%;
        }
        /* 左右方向键 */
        p {
            width: 40px;
            height: 100px;
            background-color: rgba(0,0,0,.5);
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            /* 添加绝对定位 */
            position: absolute;
            top: 150px;
        }

        .box>.rig {
            right: 0px;
        }

        .box li {
            width: 20px;
            height: 10px;
            background-color: orange;
            float: left;
            margin: 5px;
        }
        .box>ul {
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <!-- 仿写基础的绝对定位 -->
    <div class="box">
        <!-- 图片 -->
        <img src="img/q.jpg" alt="">
        <!-- 左右方向键 -->
        <p class="lef"><</p>
        <p class="rig">></p>
        <!-- 焦点图 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

图片：

3、绝对定位案例显示2

示例：实现一个图片介绍

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;padding: 0;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 5px solid gray;
            margin: 100px auto;
            /* 添加定位 */
            position: relative;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .box>p {
            height: 80px;
            width: 100%;
            background-color: rgba(0,0,0,.5);
            font-size: 30px;
            color: white;
            line-height: 80px;
            /* 需要添加定位使其到达图片上 */
            position: absolute;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/q.jpg" alt="">
        <p>你好，欢迎来到这里</p>
    </div>
</body>
</html>

图片：

4、固定定位案例显示1

分析：实际开发中，若要使得一个界面某个功能一直固定在一个地方，则可以使用固定定位进行设置

示例：实现一个右下角固定弹框

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: 3000px;
        }
        .ad {
            width: 220px;
            height: 300px;
            background-color: orange;
            line-height: 300px;
            text-align: center;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
    <div class="ad">我是弹窗</div>
</body>
</html>

图片：

5、固定定位案例显示2

分析：在开发过程中，若要使得一个界面某个功能一直固定在一个地方，则可以使用固定定位进行设置

案例：实现一个楼梯层案例

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1200px;
            height: 3000px;
            background-color: orange;
            margin: 0 auto;
        }
        ul {
            list-style: none;
        }
        ul>li {
            width: 50px;
            height: 50px;
            border:1px dashed green;
            text-align: center;
            line-height: 50px;

        }

        ul {
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 600px;
        }
    </style>
</head>
<body>
    <div class="box">版心
    </div>
    <ul>
        <li>第1层</li>
        <li>第2层</li>
        <li>第3层</li>
        <li>第4层</li>
        <li>第5层</li>
    </ul>
</body>
</html>

图片：

6、固定定位案例显示3

分析：在开发过程中，若要使得提示语之类的遮罩层位于浏览器水平垂直居中显示，则需要使用固定定位

示例：实现一个遮罩层

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
            margin: 0 auto;
        }
        .zhe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
        }

        .box {
            width: 500px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -250px;
        }
    </style>
</head>
<body>
    <!-- 
        思考：遮罩层呼应整个窗口---大小应该跟窗口一样大
     -->
    <img src="img/pic.png" alt="">
    <div class="zhe">
        <div class="box"></div>
    </div>
</body>
</html>