CSS - 定位

最新推荐文章于 2022-10-31 20:27:35 发布

学习中的小菜鸟.

最新推荐文章于 2022-10-31 20:27:35 发布

阅读量329

点赞数 1

分类专栏： CSS 文章标签：定位 css

本文链接：https://blog.csdn.net/qq_33962481/article/details/117229378

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

本文深入介绍了CSS定位的概念和用法，包括静态定位、相对定位、绝对定位、固定定位及粘性定位。详细阐述了各种定位模式的语法、特点及应用场景，并通过实例演示了如何通过边偏移调整元素位置。同时，文章讨论了定位的叠放次序、特殊性和在实际布局中的应用，为开发者提供了全面的定位知识指南。

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

一、定位的作用

某个元素可以自由的在一个盒子内移动位置, 并且压住其他盒子.
让一个盒子固定到屏幕的某个位置

二、定位的组成

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式
边偏移则决定了该元素的最终位置.

定位模式

定位模式决定元素的定位方式, 它通过CSS的position属性来设置

属性值

static : 静态定位
relative : 相对定位
absolute : 绝对定位
fixed : 固定定位

边偏移

边偏移就是定位的盒子移动到最终位置, 有 top, bottom, left 和 right 4个属性

三、静态定位

就是无定位, 没有定位

语法

选择器 { positon: static; }

四、相对定位

相对定位是元素在移动位置的时候, 是相对于它原来的位置来说的.
原来在标准流的位置继续占有, 后面的盒子仍然以标准流的方式对待它.
简单来说就是不脱标, 继续保留原来位置.

语法

选择器 { positon: relative; }

偏移

选择器 { 
	positon: relative; 
	left: 100px;
}

应用

<!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: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
            left: 200px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

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

</html>

五、绝对定位

绝对定位是元素在移动位置的时候, 是相对于它祖先元素来说的.

1. 语法

选择器 { position: absolute; }

2. 绝对定位的特点

如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位.
如果祖先元素有定位, 则以最近一级有定位的祖先元素为参考点移动位置
绝对定位不再占有原先的位置.

六、子绝父相

子级使用绝对定位, 父级则需要相对定位

子级绝对定位, 不会占有位置, 可以放到父盒子里面的任何一个地方, 不会影响其他的兄弟盒子
父盒子需要加定位限制盒子在父盒子内显示
因为父级需要占有位置, 因此是相对定位, 子盒子不需要占有位置, 所以是绝对定位

七、固定定位

固定定位是元素固定于浏览器可视区的位置. 主要使用场景: 可以在浏览器页面滚动时元素的位置不改变.

语法

选择器 {
	position: fixed;
}

特点

以浏览器的可视窗口为参照点移动元素
不随滚动条滚动
固定定位不再占有原来的位置

固定到版心右侧

<!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>
        .box {
            height: 2000px;
            width: 900px;
            background-color: pink;
            margin: 0 auto;
        }

        .top {
            position: fixed;
            /* 往下走可视化区域的百分之90 */
            top: 90%;
            /* 往右走可视化区域的百分之50 */
            left: 50%;
            /* 往右走版心的百分之50 */
            margin-left: 450px;
            height: 40px;
            width: 40px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">

        </div>
    </div>
</body>

</html>

八、粘性定位

粘性定位可以认为是相对定位和固定定位的混合.

语法

选择器 { position: sticky; top: 10px; }

特点

以浏览器的可视窗口为参数点移动元素
粘性定位占有原先的位置

应用

<!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>
        body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            top: 10px;
            height: 50px;
            width: 900px;
            margin: 100px auto;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="nav">

    </div>
</body>

</html>