关于css中的定位（position）

最新推荐文章于 2023-10-21 09:42:12 发布

str_stu

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量277

点赞数 1

文章标签： css 定位 html

本文链接：https://blog.csdn.net/str_stu/article/details/104457235

版权

CSS定位（position）

在做web页面的时候，需要把不同元素进行排版，按照一定的位置摆放，做出一个完整的页面。解决排版主要用到的是浮动（float） 和 定位（position），浮动通常解决的是容器左右排列的问题，而定位可以解决叠加排列的问题。

CSS 定位 (position) 属性允许你对元素进行定位。
定位的基本思想很简单，定义元素相对于其正常位置应该出现的位置（relative），或者相对于父元素、另一个元素甚至浏览器窗口本身的位置（absolute）。

CSS定位的几种形式

position的取值：

position：static（默认）| relative | absolute | fixed | sticky
分别对应相对定位、绝对定位、固定定位、黏性定位

relative 相对定位

不脱离文档流，相对于自身静态位置通过 top (上) , bottom（下）, left（左）, right（右）定位，可以通过z-index进行层次分级（当需要一个层在上一个层在下时使用）。
如果没有定位偏移量，对元素本身没有任何影响。当元素使用position属性为relative时，不使元素脱离文档流，空间是会被保留的。不会影响其他元素的布局。left、top、right、bottom是相对于当前元素自身进行偏移的。

relative定位示例：

<html>
<head>
    <style type="text/css">
        div {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }

        .position-left {
            position: relative;
            left: -100px
        }

        .position-right {
            position: relative;
            left: 100px
        }
    </style>
</head>

<body>
    <div>这是正常位置的div</div>
    <div class="position-left">这个div相对于其正常位置向左移动</div>
    <div class="position-right">这个div相对于其正常位置向右移动</div>
</body>

</html>

在这里插入图片描述

absolute 绝对定位

使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位父级元素，则相对于定位父级元素发生偏移，没有定位父级元素，则相对于整个文档发生偏移（绝对、相对、固定）
注：如果父级元素中有多个元素具备定位模式，那么是已离自己最近的父级元素进行偏移。

absolute定位示例：

<html>

<head>
    <style type="text/css">
        .position-absolute {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 100px;
            top: 150px
        }
    </style>
</head>

<body>
    <div class=" position-absolute ">带有绝对定位的div</div>
</body>

</html>

在这里插入图片描述

fixed 固定定位

这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
使元素完全脱离文档流
使内联元素支持宽高（让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到父级元素的影响。

fixed定位示例：

<html>

<head>
    <style type="text/css">
        div {
            border: 1px solid black;
            width: 200px;
            height: 200px;
        }

        .div1 {
            position: fixed;
            left: 0px;
            top: 100px;
        }

        .div2 {
            position: fixed;
            top: 100px;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="div1">这是固定在左侧的div</div>
    <div class="div2">这是固定在右侧的div</div>
</body>

</html>

在这里插入图片描述

sticky 黏性定位

sticky是在浏览器窗口中进行定位的，当页面较大时，滑动滚动条，在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式（fixed）。

定位偏移量 : left top right bottom , 不能单独使用，必须得配合定位模式。

sticky定位示例：

<html>

<head>
    <style>
        body {
            height: 2000px
        }

        .box1 {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            position: sticky;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="box1">这是一个黏性定位的div</div>
</body>

</html>

在这里插入图片描述

关于层次分级z-index

默认层级为0
嵌套时候的层级问题
处于嵌套中的层级比较，会先跟同级别的先比较。（比较的时候，必须有定位模式和z-index）

str_stu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css中的定位（position）

CSS定位（position）在做web页面的时候，需要把不同元素进行排版，按照一定的位置摆放，做出一个完整的页面。解决排版主要用到的是浮动（float）和定位（position），浮动通常解决的是容器左右排列的问题，而定位可以解决叠加排列的问题。CSS 定位 (position) 属性允许你对元素进行定位。定位的基本思想很简单，定义元素相对于其正常位置应该出现的位置（relative）...
复制链接

扫一扫