css中关于position定位问题

最新推荐文章于 2024-07-11 17:28:05 发布

树儿呀

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量115

点赞数

分类专栏： css相关文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_68709700/article/details/133275894

版权

css相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定位介绍

我们平常写的HTML是普通文档流中的东西，使用float是脱离文档流（没脱离文本流）。

定位可以完全脱离，并且他的好处在于想移动到哪里就移动到哪里。

float和position能不用就不要用。

格式：position:value，只是用来确定要进行定位的基准。

static，默认值，正常生成元素框，块级元素生成矩形框，行内元素生成一个或多个内联盒子组成行框。

top、left、bottom、right四个属性来移动。

top，指定定位元素上边离基准的上边界的距离。正值是向下，负值是向上。
bottom，指定定位元素下边离基准的下边界的距离。正值向上，负值向下。
left，指定定位元素左边离基准的左边界的距离。正值向右，负值向左。
right，指定定位元素右边离基准的右边界的距离。正值向左，负值向右。

相对定位介绍

realtive，相对于元素自身本来的位置进行定位，他的基准是元素本身应该在的位置。

相对定位的元素即使移动走，本来的位置也不会被其他元素占据。
同时使用left、right，left生效。
同时使用top、bottom，top生效。
移动时候如果使用百分比指的是相对于包含父元素计算的，不是自身。

绝对定位介绍

absolute，绝对定位的元素会从文档流中删除，他的位置相对于容纳块来确定。

绝对定位的容纳块是position的值不是static的最近的祖辈元素。

<!DOCTYPE html>
<html>
    <head>
        <style>
            #f{
                position: relative;
                width:500px;
                height:500px;
                border:1px solid green;
            }
            #z{
                position: absolute;
                width:300px;
                height:300px;
                border:1px solid red;
            }
            #s{
                position:absolute;
                right:0;
                bottom:0;
                width:100px;
                height:100px;
                border:1px solid yellow;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z">
                <div id="s"></div>
            </div>
        </div>
    </body>
</html>

常用的套路是将祖辈元素只单纯的设置为position:relative

如果到最后没有祖辈元素的值不是static的那么就要靠初始容纳快作为基准。

初始容纳块是根元素（html标签）的容纳块，他是由浏览器建立的，是窗口大小的矩形，页面的第一屏。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                width:3000px;
                height:3000px;
            }
            #f{
                /* position: relative; */
                width:500px;
                height:500px;
                border:1px solid green;
            }
            #z{
                /* position: absolute; */
                width:300px;
                height:300px;
                border:1px solid red;
            }
            #s{
                position:absolute;
                right:0;
                bottom:0;
                width:100px;
                height:100px;
                border:1px solid yellow;
            }
        </style>
    </head>
    <body>
        <div id="f">
            <div id="z">
                <div id="s"></div>
            </div>
        </div>
    </body>
</html>

1. 绝对定位的元素将会生成一个块级元素。

<!DOCTYPE html>
<html>
    <head>
        <style>
            span{
                position: absolute;
                width:100px;
                height:100px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <span></span>
    </body>
</html>

2. 子元素浮动，父元素绝对定位，父元素将不会塌陷。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border:1px solid green;
            position:absolute;
        }
        span {
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <span></span>
    </div>
</body>

</html>

3. 当width为auto的时候同时使用left和right。当height为auto的时候同时使用top和bottom，将会自动将width或height拉开。

    本元素的内容区宽度 = 容纳块的宽度（内容区宽度+padding宽度） - left - margin-left - bordr-left - padding-left - padding-right - border-right - margin-right - right。
    
    要同时使用left和right 或 top和bottom

固定定位介绍

fixed，固定定位的元素将从文档流中删除。相对于视口（浏览器窗口）来定位。

opacity属性：指定一个元素的透明度，当这个属性的值应用到某个元素上的时候。将这个元素当成一个整体来看待（包括它的内容、背景色、前景色（字体）、边框）。

opacity属性的值是0~1。0是完全透明，1是完全不透明。

display:none

visibility：

visibile，元素可见。
hidden，元素不可见，但是依然影响文档的布局。

display:none和visibility:hidden的区别在于，隐藏之后是否影响文档的布局。display:none不影响文档布局，visibility:hidden是影响文档布局的。

堆叠顺序

z-index来控制。

auto，可以将当作0来处理。

这个元素一旦成为定位元素（position的值不是static），那z-index就自动生效了。这个时候z-index的值就是默认的auto。
当元素的层叠水平一致，代码后面的元素会覆盖前面的元素。

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            position:absolute;
            top:0;
            left:0;
            width:200px;
            height:200px;
        }
        #f1{
            background-color:red;
        }
        #f2{
            background-color:gold;
        }
    </style>
</head>
<body>
    <div id="f1">1</div>
    <div id="f2">2</div>
</body>
</html>

定位元素在非定位元素的上面，和源代码顺序没有关系。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        #f1 {
            position: absolute;
            top: 0;
            left: 0;
            background-color: red;
        }
        #f2 {
            background-color: gold;
        }
    </style>
</head>
<body>
    <div id="f2">2</div>
    <div id="f1">1</div>
</body>
</html>

数值，数值可以去任何的整数，正数、负数都行。值越大越靠上，值越小越靠下。
z-index的值不需要连续。

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        #f1 {
            background-color: red;
            z-index:200;
        }
        #f2 {
            background-color: gold;
            z-index:99999999;
        }
    </style>
</head>
<body>
    <div id="f2">2</div>
    <div id="f1">1</div>

</body>
</html>