css的定位方式

最新推荐文章于 2024-07-20 21:01:09 发布

嗯18

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量685

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_64298312/article/details/136605024

版权

本文详细介绍了CSS中的四种定位方式：z-index决定元素层级，relative相对定位，absolute绝对定位脱离文档流，fixed固定定位与页面固定，sticky粘性定位。通过实例展示了它们在布局中的应用和特点。

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

z-index值的大小决定层级高低，决定相同位置的元素谁会被覆盖，定位元素的z-index值默认是0但是都比普通元素要大，所以默认情况下相同位置的元素，定位元素可以覆盖在普通元素上。

1.相对定位

position: relative
相对定位是相对自己原来的位置来进行偏移，但是没有脱离文档流它所在的位置仍然被它占据着

lef: 相对原来位置向左偏移量：

right: 相对原来位置向右偏移量：

top: 相对原来位置向上偏移量：

bottom：相对原来位置向下偏移量

2.绝对定位

position: absolute

绝对定位是脱离文档流的

绝对定位是相对距离自己最近的开启定位的父类元素一级一级的往上找直到找到第一个开启定位的父元素如果一直找不到则默认为<html>，称之为包含块

left: 距离包含块左边的距离：

right: 距离包含块右边的距离：

top: 距离包含块上边的距离：

bottom：距离包含快下边的距离：

同一个水平方向只写一个：如left和right只能写一个

演示：在没有开启定位时子元素inner1和inner2是块级元素各自占用整个宽度

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            height: 500px;
            background-color: aqua;
            margin: 0 auto;
        }
        .inner1 {
            width: 100px;
            height: 100px;
            background-color: brown;
        }
        .inner2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>
    
</body>
</html>

当给父元素开启相对定位时再给子元素开启绝对定位并且定位距离父元素left: 200px,top: 0px

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            height: 500px;
            background-color: aqua;
            margin: 0 auto;
            position: relative;
        }
        .inner1 {
            width: 100px;
            height: 100px;
            background-color: brown;
            font-size: 20px;
        }
        .inner2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            font-size: 20px;
            position: absolute;
            left: 200px;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner1">inner1</div>
        <div class="inner2">inner2</div>
    </div>
    
</body>
</html>

效果图可以说明绝对定位是脱离文档流的并且是相对第一个开启定位的父元素而言的