CSS-定位

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

流星雨^-^

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

阅读量280

点赞数

本文链接：https://blog.csdn.net/qiutiandepaomo/article/details/117633260

版权

定位：将盒子定在某一位置，自由的漂浮在其他盒子的上面。定位也是用来布局的，定位=定位模式+边偏移。

在CSS中，通过top、bottom、left和right属性定义元素的边偏移。

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

在css中，通过position属性定义元素的定位模式，语法如下：

选择器 {position：属性值}

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

一、静态定位 static

元素默认定位方式，无定位的意思，不要定位的时候用。静态定位按标准流特性摆放位置，没有边偏移。

二、相对定位 relative

相对定位是元素相对于它原来在标准流中位置。相对定位的两个特点：1、相对于自己原来在标准流中位置来移动的；2、原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

三、绝对定位 absolute

绝对定位是元素以带有定位的父级元素来移动位置。如果父级没有定位(绝对、固定或相对定位)，绝对定位子盒子以我们文档为准。如果父级(祖先)有定位(绝对、固定或相对定位)，绝对定位子盒子以父级为准移动位置。绝对定位的特点：1）绝对是以带有定位的父级元素来移动位置的，如果父级都没有定位，则以浏览器文档为准移动位置；2）不保留原来的位置，完全是脱标的。

1、父级元素没有定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            .father{
                width: 350px;
                height: 350px;
                background-color: pink;
                margin: 100px;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: purple;
                position: absolute;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
       <div class="father">
           <div class="son">

           </div>
       </div>
    </body>
</html>

显示效果：

2、父级元素有定位

2.1、父级元素有定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            .father{
                width: 350px;
                height: 350px;
                background-color: pink;
                margin: 100px;
                position: relative;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: purple;
                position: absolute;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
       <div class="father">
           <div class="son">

           </div>
       </div>
    </body>
</html>

显示效果：

2.2、祖先有定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绝对定位</title>
        <style>
            .grandfather{
                width: 500px;
                height: 500px;
                background-color: skyblue;
                position: relative;
            }
            .father{
                width: 350px;
                height: 350px;
                background-color: pink;
                margin: 100px;
            }
            .son{
                width: 200px;
                height: 200px;
                background-color: purple;
                position: absolute;
                top: 50px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div class="grandfather">
            <div class="father">
                <div class="son">
     
                </div>
            </div>
        </div>
    </body>
</html>

显示效果：

一般在实际开发中，我们采用的是"子绝父相"的模式，子级采用绝对定位，父级采用相对定位。

需要注意的是：绝对定位不能通过margin:auto 设置水平居中。可以通过：1、left：50% 让盒子的左侧移动到父级元素的水平中心位置；2、margin-left：width/2 让盒子向左移动"自身宽度的一半"。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div {
            position: absolute;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三、固定定位

固定定位是绝对定位的一种特殊形式，1）完全脱标，完全不占位置；2）只认浏览器可视窗口，浏览器可视窗口+边偏移属性来设置元素的位置。跟父元素没有任何关系，单独使用，不随滚动条滚动。

四、堆叠顺序

在使用后定位布局的时候，可能会出现盒子重叠的情况，加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆叠顺序。z-index的特性：1）属性值，正整数、负整数或0，默认值是0，数值越大，盒子越靠上；2）如果属性值相同，则按照书写顺序，后来居上；3）z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

五、定位改变display属性

前面说过，display可以改变显示模式，使用float属性默认转换为行内块。这里，绝对定位和固定定位也和浮动类似，默认转换为行内块。需要注意的是：浮动元素、绝对定位元素都不会触发外边距合并的问题。