css基础-9-定位

最新推荐文章于 2024-05-29 20:35:27 发布

Neptuneyut

最新推荐文章于 2024-05-29 20:35:27 发布

阅读量946

点赞数

分类专栏： Web前端文章标签： html css

本文链接：https://blog.csdn.net/qq_42491125/article/details/106464411

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

为什么需要定位
如何定位
叠放次序
参考

为什么需要定位

网页中需要设置某些元素的位置，使得出现在特定位置，例如小米官网右侧的列表窗口，随着下拉页面始终固定在页面中

在这里插入图片描述

如何定位

position开启不同定位方式
定位效果：定位模式 + 边偏移

定位模式值	描述
absolute	绝对定位，相对其带有定位的最近父元素定位
relative	相对定位，相对自己原来位置定位，不脱标准流，保留原来位置空间
fixed	固定定位，相对浏览器可视窗口定位
sticky	粘性定位
static	静态定位（默认）

定位模式值	描述
top	定义元素相对与其父元素上边偏移量
bottom	定义元素相对与其父元素下边偏移量
left	定义元素相对与其父元素左边偏移量
right	定义元素相对与其父元素右边偏移量

相对定位

相对定位是相对于元素自身原来位置定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
        }

        /* box1开启相对定位，偏移之后，原来位置仍然保留，不影响后续布局 */
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: salmon;
        }

        .box2 {
            background-color: sandybrown;
        }
    </style>
</head>

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

</html>

在这里插入图片描述

绝对定位

绝对定位相对与其祖先元素定位
若无祖先元素或祖先元素未定位，则相对与html定位
若父元素开启了定位（非static），则子元素相对带有定位的最近一级父元素偏移定位
绝对定位脱离文档定位，不保留原来空间
由于脱离文档流，后续的元素会占用其空间
行内元素可以设置宽高

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        /* 父元素开启相对定位，子元素开启绝对定位则相对与父元素偏移 */
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: salmon;
        }

        .son {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 60px;
            height: 30px;
            background-color: sandybrown;
        }
    </style>
</head>

<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
</body>

</html>

在这里插入图片描述

绝对定位和相对定位该什么时候用呢？

以轮播图为例，左右滑动和右下的按钮属于子元素，可以开启绝对定位，此时相对包括它的父元素定位，可以在父元素范围的任意位置设置，并且脱离文档流，不影响其他布局
父元素必须开启定位，此时应该开启相对定位，若开启绝对定位会导致其他布局混乱问题
总结来说，常用子绝父相的定位模式

绝对定位如何居中显示
- 开启绝对定位的元素无法使用margin:0 auto;居中显示
- 通过两步法使得绝对定位居中显示：
  1.将元素的left偏移量设置为父元素宽度的50%
  2.将元素的margin-left设置为自身宽度的 -50%
绝对定位（脱标的定位）具有类似浮动的效果，行内元素开启绝对定位，则可直接设置宽高，而块元素开启绝对定位不给宽高则默认是内容大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 开启绝对定位元素的水平居中方法 */
        .father {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .son {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: salmon;
            /* 开启绝对定位，元素无法通过margin:0 auto;水平居中 */
            /* margin: 0 auto; */
            /* 第一步，左偏移网页的宽度50% */
            left: 50%;
            /* 第二步，左偏移div宽度-50% */
            margin-left: -100px;
        }
    </style>
</head>

<body>
    <div class="father">father
        <div class="son">son</div>
    </div>
</body>

</html>

在这里插入图片描述

固定定位

固定定位相对浏览器可视窗口定位，可视窗口会随着浏览器缩放动态变化
不随滚动条而动
脱标，不再保留位置，浮于页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 4000px;
        }

        div>img {
            position: fixed;
            top: 330px;
            right: 10px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div><img src="http://suo.im/6nrYqh" alt=""></div>
</body>

</html>

粘性定位

以浏览器可视窗口为参照
占有原来的位置
必须添加top/bottom/left/right其一的值

叠放次序

z-index：设置当元素重叠时的显示先后顺序（图层）
值可以是正/负或0，值越大盒子越靠上
默认auto，当一样时，根据书写顺序，后来居上

参考

黑马pink老师

Neptuneyut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础-9-定位

文章目录为什么需要定位如何定位相对定位绝对定位固定定位粘性定位叠放次序参考为什么需要定位网页中需要设置某些元素的位置，使得出现在特定位置，例如小米官网右侧的列表窗口，随着下拉页面始终固定在页面中如何定位position开启不同定位方式定位效果：定位模式 + 边偏移定位模式值描述absolute绝对定位，相对其带有定位的最近父元素定位relative相对定位，相对自己原来位置定位，不脱标准流，保留原来位置空间fixed固定定位，相对浏览器可视窗口定位
复制链接

扫一扫