定位(Positioning)

妍华之喜

已于 2022-04-27 19:20:57 修改

阅读量540

点赞数 2

文章标签： css html 定位前端

于 2020-11-18 18:38:06 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/109781604

版权

定位(Positioning)

今天我们来学布局时需要用到的最后一个知识点——定位.

在学习定位之前我们先开动自己的小脑瓜想想为什么需要定位呢?

其实答案很简单,因为我们使用标准流和浮动达不到我们想要的效果,所以才需要定位帮助我们来实现我们想要的效果.

那么到底是什么效果呢?

当我们浏览网页的时候,是不是会看到一些侧边栏,不管我们怎么滚动页面窗口,它都会固定在那一个位置,不会因为页面的上下滚动而变化,这就是定位的作用.

上篇博客我们讲了浮动,浮动可以让多个块级的盒子一行显示并且相邻的盒子之间没有缝隙,浮动主要用于横向排列盒子.

那么今天这篇博客讲的定位则是可以让盒子自由的在某个盒子内部固定在某一位置上,或者固定在屏幕的某个位置,并且可以压住其他的盒子.

定位的组成:

定位本质上也是摆放盒子.说的通俗点就是按照定位的方式移动盒子

定位=定位模式+边偏移

定位模式

定位模式就是元素在文档中的定位方式
定位模式在CSS中通过position属性进行设置

定位模式分为四类

静态定位(static)

静态定位就是元素默认的定位方式,就是无定位的意思
一般按照标准流的特性摆放盒子

语法

选择器 {position: static;}

相对定位(relative)

相对定位就是元素移动位置的时候,是相对于它自己原来的位置进行移动

语法

选择器 {position:relative;}

相对定位的特点:

相对定位是相对于它自己原来的位置进行移动
利用相对定位移动以后,原来在标准流中的位置是继续占有的,后面的盒子仍然以标准流的方式去对待它(相对定位以后元素没有脱标)

绝对定位(absolute)

绝对定位就是元素移动的时候,是相对于它的父级元素来说的.

语法

选择器 {position:absolute;}

绝对定位的特点:

如果没有父级元素,或者父级元素没有定位的话,那么我们以浏览器为准定位
如果父级元素有定位的话,无论是相对定位还是绝对定位还是固定定位,那么都以最近一级的定位了的父级元素为参考点进行移动位置
元素绝对定位了以后不在占有原先的位置(脱标)

子绝父相

如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。
如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。

子绝父相注意:

子元素是绝对定位,不会占有位置
父盒子布局时,需要占用位置,因此父级只能是相对定位
一般情况下相对定位经常用来作为绝对定位的父级

固定定位( fixed)

固定定位就是元素固定在浏览器的可视区域

使用场景:

可以在浏览器页面滚动的时候,元素的位置不会改变

语法:

选择器 {position:fixed;}

固定定位的特点:

以浏览器的可视窗口作为参照来移动元素
和父级没有任何关系
不会随着滚动条而滚动
固定定位不会占有原来的位置
固定定位也是脱标的,我们可以把固定定位看作特殊的绝对定位

粘性定位(sticky)

粘性定位是相对定位和固定定位的混合

粘性定位的特点:

以浏览器可视窗口为参照的移动元素(固定定位的特点)
占有原来的位置(相对定位的特点)
必须添加top/left/right/bottom的其中一个才有效(兼容性较差IE,跟页面滚动搭配使用)

元素定位模式总结:

定位模式	语法	是否脱标	移动位置
静态定位(static)	选择器 {position: static;}	否	不能使用边偏移
相对定位(relative)	选择器 {position: relative;}	否	相对于自身位置进行移动
绝对定位(absolute)	选择器 {position: absolute;}	是	带有定位的父级
固定定位(fixed)	选择器 {position: fixed;}	是	浏览器的可视区域
粘性定位(sticky)	选择器 {position: sticky;}	否	浏览器的可视区域

边偏移

边偏移用来决定元素的最终位置

边偏移总结

边偏移	偏移方向(单位:px)
顶部偏移量(top)	盒子距离上边线的距离
底部偏移量(bottom)	盒子距离下边线的距离
左部偏移量(left)	盒子距离左边线的距离
右部偏移量(right)	盒子距离右边线的距离

定位叠放次序

我们上面说过定位的盒子可以压住其他的盒子,所以我们在使用定位布局的时候,可能会出现盒子重叠的情况.

为了解决这个问题,我们可以使用z-index来控制盒子的叠放次序

语法

选择器 {z-index: 数值 ;}

特点:

数值可以是正整数,负数和零,默认的是零,在显示的时候,数值越大,盒子的叠放次序越靠上
如果属性的值相同的话,那么后来居上
属性值的后面没有单位
只有定位了的盒子才有z-index属性

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素的层级</title>
    <style>
        .box {
            width: 1200px;
            height: 600px;
            border: 1px solid black;
            margin: 50px auto;
            /* 父级元素给一个相对定位 */
            position: relative;
        }

        .box div {
            width: 250px;
            height: 250px;
            position: absolute;
        }

        .yi {
            background-color: red;
            top: 20px;
            left: 20px;
            z-index: -10;
        }

        .er {
            background-color: greenyellow;
            top: 40px;
            left: 40px;
            z-index: 20;
        }

        .san {
            background-color: blue;
            top: 60px;
            left: 60px;
            z-index: 30;
        }

        .si {
            background-color: pink;
            top: 15px;
            left: 15px;
            z-index: -40;
        }

        /* z-index层级关系是根据坐标轴上的关系来决定显示的先后顺序的 */
        /* 坐标轴上越往右越大  所以越大的数  她的显示等级就越高  显示等级高的优先显示 */
    </style>
</head>

<body>
    <div class="box">
        <div class="yi"></div>
        <div class="er"></div>
        <div class="san"></div>
        <div class="si"></div>
    </div>
</body>

</html>

定位补录:

如何让绝对定位的盒子居中?

加了绝对定位的盒子不能通过margin:0 auto;来进行水平居中.

解决办法:(垂直居中的解决办法也相同)

第一步,通过left:50%;让盒子左侧移到父级元素的水平中心位置

第二步,margin-left:减去盒子宽度的一半,实现水平居中

定位的特殊性

绝对定位和固定定位其实和我们以前学过的浮动类似
行内元素添加绝对或固定定位,可以直接设置高度和宽度
块元素添加绝对或固定定位,如果不给宽高,默认大小是内容的大小
定位以后脱标的盒子不会出现外边距的塌陷问题
绝对定位(固定定位)会完全压住盒子
浮动的话,浮动只会压住下面标准流的盒子,但是不会压住下面标准流的文字,因为浮动产生的目的就是为了做文字环绕的.但是绝对定位(固定定位)会压住下面标准流所有的内容