CSS中position详解

最新推荐文章于 2024-07-28 21:35:25 发布

木习习C

最新推荐文章于 2024-07-28 21:35:25 发布

阅读量2.1w

点赞数 34

文章标签：前端 position css

本文链接：https://blog.csdn.net/weixin_41459434/article/details/93483583

版权

一些关于定位和叠加的理解

一、position属性

position有5个值，分别为static，relative，absolute，fixed，sticky。

1.1 static

static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。

1.2 relative

relative相对定位的元素会较正常文档流中的位置进行偏移，受top，bottom，left，right的影响。就是元素还在文档流中像static一样占着位置，但视觉上会有偏移，多用于absolute绝对定位的父元素。

1.3 absolute

absolute绝对定位会脱离正常的文档流，相对于最近的进行过定位的（非static）父级元素定位，若没有父级元素进行过定位，则相对于即浏览器窗口定位。

1.4 fixed

fixed固定定位同样是脱离正常的文档流，一直相对于浏览器窗口定位，无论页面如何滚动，此元素总在屏幕的同一个位置。
注：当fixed定位的父元素使用了transform的样式时，fixed定位会失效，变成和absolute一样的效果。

1.5 sticky

sticky粘性定位需要指定 top，right，bottom，left 四个阈值其中之一才会生效。
阈值为此元素在可视区域中与边界的距离，跨越特定阈值前为相对定位（relative），当页面滚动导致此元素跨越阈值则变为固定定位（absolute）。
注：此属性兼容性不是特别好，请根据业务场景进行选择。
附兼容性传送门：https://caniuse.com/#search=sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div class="box">
       <div>title</div>
       <div class="stickyBar">stickyBar</div>
       <p>this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!this is a paragraph!</p>
   </div>
</body>
</html>
<style>
    div.box{
        height: 2000px;
    }
    div.stickyBar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4CAF50;
        width: 200px;
    }
    div p {
        width: 200px;
    }
</style>

效果：
在这里插入图片描述

二、元素叠加时的几种状态

实际开发过程中免不了遇到元素的叠加问题，大都可以使用除static以外的定位方式（relative，absolute，fixed，sticky），配合z-index来控制叠加的展示方式（z-index只在position不为static时才生效）。
注：父级加transform、opacity会使子元素的z-index失效，因为它们会创建新的stacking context，然后子元素原来设置的z-index会作用到这个新的stacking context上。
以下是可能的几种情况：

2.1

同一级别的元素，定位方式相同且没有设置z-index，在html结构中靠后的元素在上面。
注：同级别的static元素也可以叠加。常见的方法有把margin设为负数或使用transform。用transform的话，需要把两个元素都加上transform，这样在html结构中靠后的元素会在上面，否则加了transform的会展示在没加transform的元素上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>divOne</p>
        <p>position: absolute;</p>
    </div>
    <div class="two">
        <p>divTwo</p>
        <p>position: absolute;</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 10px;
        left: 10px;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
    }
</style>

在这里插入图片描述

2.2

同一级别的元素使用了relative，absolute，fixed，sticky，那么z-index值大的元素在上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>divOne</p>
        <p>position: relative;</p>
    </div>
    <div class="two">
        <p>divTwo</p>
        <p>position: absolute;</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: relative;
        background-color: red;
        top: 10px;
        left: 10px;
        z-index: 99;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 50px;
        left: 100px;
        z-index: 1;
    }
</style>

在这里插入图片描述

2.3

同级别的元素，relative，absolute，fixed，sticky定位会在static上面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>absolute</p>
    </div>
    <div class="two">
        <p>static</p>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 0;
        left: 0;
    }
    .two {
        position: static;
        background-color: blue;
        margin: 100px 0 0 100px;
        padding-top: 100px;
    }
</style>

在这里插入图片描述

2.4

非同级别的使用了relative，absolute，fixed，sticky的元素，他们的叠加顺序是以非static的最上层的祖级元素的z-index进行比较的，没有非static的祖级则用自身进行比较，与此元素的子元素的z-index无关，再高都没用。
文字描述不是很清晰，举几个例子：

example1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>absolute</p>
        <p>z-index:2</p>
        <div class="child">
            <p style="padding-left: 28px">absolute</p>
            <p style="padding-left: 28px">z-index:1</p>
        </div>
    </div>
    <div class="two">
        <p style="padding-left: 100px">absolute</p>
        <p style="padding-left: 100px">z-index:1</p>
        <div class="child">
            <p style="padding-left: 28px">absolute</p>
            <p style="padding-left: 28px">z-index:99</p>
        </div>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    div .child {
        width: 100px;
        height: 100px;
        margin: 0 0 0 70px;
        position: relative;
        font-size: 14px;
    }
    .one {
        position: absolute;
        background-color: red;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .one .child {
        background-color: palevioletred;
        z-index: 1;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
        z-index: 1;
    }
    .two .child {
        background-color: purple;
        z-index: 99;
    }
</style>

example2

可以实现父元素在底下，子元素在上面的情况。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <p>static</p>
        <div class="child">
            <p style="padding-left: 28px">relative</p>
            <p style="padding-left: 28px">z-index:1</p>
        </div>
    </div>
    <div class="two">
        <p style="padding-left: 100px">static</p>
        <div class="child">
            <p style="padding-left: 28px">static</p>
        </div>
    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
        box-sizing: border-box;
    }
    div .child {
        width: 100px;
        height: 100px;
        margin: 0 0 0 70px;
        font-size: 14px;
    }
    .one {
        position: static;
        background-color: red;
    }
    .one .child {
        position: relative;
        background-color: palevioletred;
        z-index: 1;
    }
    .two {
        position: static;
        background-color: blue;
        margin: -150px 0 0 75px;
    }
    .two .child {
        position: static;
        background-color: purple;
    }
</style>

example3

稍微复杂一点的情况
在这里插入图片描述

2.5

最后再来看一种被transform影响到的情况。

父级红色未加transform

在这里插入图片描述

父级红色加了transform

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="one">
        <div class="oneChild"></div>
    </div>
    <div class="two">

    </div>
</body>
</html>
<style>
    p {
        margin: 0;
    }
    div {
        width: 200px;
        height: 200px;
        border: 1px solid black;
    }
    .one {
        position: static;
        background-color: red;
        /*transform: translate(1px,1px);*/
    }
    .oneChild {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 50px 0 0 50px;
        position: relative;
        z-index: 2;
    }
    .two {
        position: absolute;
        background-color: blue;
        top: 100px;
        left: 100px;
        z-index: 1;
    }
</style>

木习习C

关注

34
点赞
踩
170

收藏

觉得还不错? 一键收藏
0
评论
CSS中position详解

一些关于定位和叠加的理解一、position属性position有5个值，分别为static，relative，absolute，fixed，sticky。1.1 staticstatic是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。1.2 relativerelative相对定位的元素会较正常文档流中的位置进...
复制链接

扫一扫