网站首页 > 技术文章正文

CSS-定位

nanyue 2025-01-07 14:47:11 技术文章 7 ℃

为什么需要定位?

浮动可以让多个块级盒子一行没有缝隙排列显示,多用于横向排列盒子.
定位则可让盒子自由地在某个盒子内移动或者固定屏幕某个位置,并且可以压住其他盒子.

定位组成

定位:将盒子定在某一个位置

定位=定位模式+边偏移

定位模式~>指定一个元素在文档中的定位方式

div {
        /* 定位模式 值
        static~>静态定位 (默认方式) 无定位
        relative~>相对定位 
        absolute~>绝对定位 
        fixed~>固定定位 */
        position: static;
    }

边的偏移~>决定了该元素的最终位置

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 偏移方向:偏移距离 上 下 左 右 */
            top: 100px;
            bottom: 100px;
            left: 100px;
            right: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div>盒子A</div>
</body>

</html>

相对定位 relative

相对定位是元素在移动位置的时候,相当于它原来的位置

特点:

移动位置的时候参照点是自己原来的位置
原来在标准流的位置继续占有.后面盒子仍然以标准流的方式对于它

实践效果:

代码展示:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .Lazy {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Lazy">懒羊羊</div>
    <div>喜羊羊</div>
</body>

</html>

绝对定位 absolute

绝对定位是元素在移动位置的时候,是相对于它祖先的元素来说的

特点:

如果没有祖先元素/祖先元素没有定位,则以浏览器为准定位(Document文档)
绝对定位不再占有原先的位置
如果祖先的元素有定位(相对绝对固定),则以最近一级有定位祖先为参考点移动位置

实践

1.祖先元素无定位以浏览器为基础

效果展示:

代码展示:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .Pleasant {
            float: right;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Pleasant">
        喜羊羊 
        <div class="small-bell">铃铛</div>
    </div>

</body>

</html>

2.祖先有定位以上一级为基础

效果展示

代码展示

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sheep {
          position: absolute;
          background-color: sandybrown;
          width: 600px;
          height: 600px;
        }
        .Pleasant {
            position: absolute;
            bottom: 50px;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="sheep">
        
        <div class="Pleasant">
            喜羊羊 
            <div class="small-bell">铃铛</div>
        </div>
    </div>

</body>

</html>

子绝父相

子级是绝对定位的话父级要用相对定位

使用原因:

子盒子绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父盒子只能相对定位

总结:父级需要占用位置,则选相对定位.子盒子不需要占位置,则选择绝对定位

但是不是一成不变 按需求来开发灵活变动

实践

使用效果

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        height: 240px;
        padding: 20px 5px;
        border: 1px solid coral;
    }
    .goods {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .goods .hot {
       position: absolute;
       top: -7px;
       right: -10px;
       width: 25px;
    }
</style>
<body>
    <div class="box">
        <div class="goods">
            <img class="hot" src="img/hot.png" alt="">
            <img src="img/thing.png" alt="">
        </div>
    </div>
</body>
</html>

固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置

特点

1.以浏览器的可视窗口为参照点移动元素(跟父元素没有任何关系,不随滚动条滚动)

2.固定定位不再占有原先的位置

大厂使用案例:

实践

效果展示

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }
    /* 固定标签的基本用法 */
    .navigation {
        position: fixed;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
    /* 小技巧 固定在版心右侧位置 */
    /* 
    1.让固定定位的盒子left:50% 走到浏览器可视区的一半位置 
    2.让固定定位的盒子margin-left:版心宽度的一半距离(如此案例 900px宽度 一半450px 为了存在缝隙 可多些距离) 多走版心宽度的一半位置
    就实现让固定定位的盒子贴着版心右侧对齐了
    */
    .tag {
       width: 50px;
       height: 50px;
       background-color: #12a182;
       position: fixed;
       top: 100px;
       left: 50%;
       margin-left: 455px;
    }
</style>
<body>
    <div class="core">
        <div class="navigation"></div>
        <div class="tag">TAG</div>
    </div>
</body>
</html>

?粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合

特点

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

大厂使用案例:

实践

使用效果:

代码展示:

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

<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }

    /* 固定标签的基本用法 */
    .navigation {
        position: sticky;
        /* 必须存在一个偏移量 */
        top: 0;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="core">
        <div class="navigation"></div>
        <span>河边芦苇密又繁，秋深露水结成霜。意中之人在何处？就在河水那一方。</span>
        <br>
        <span> 逆着流水去找她，道路险阻又太长。顺着流水去找她，仿佛在那水中央。</span>
        <br>
        <span>河边芦苇密又繁，清晨露水未曾干。意中之人在何处？就在河岸那一边。</span>
        <br>
        <span>逆着流水去找她，道路险阻攀登难。顺着流水去找她，仿佛就在水中滩。</span>
        <br>
        <span>河边芦苇密稠稠，早晨露水未全收。意中之人在何处？就在水边那一头。</span>
        <br>
        <span>逆着流水去找她，道路险阻曲难求。顺着流水去找她，仿佛就在水中洲。</span>
    </div>
</body>

</html>

定位小总结?

定位模式	是否脱标	移动位置
static(默认)	否	不能使用边偏移
relative	否(占有位置)	相对于自身位置移动
absolute	是(不占有位置)	带有定位的父级
fixed	是(不占有位置)	浏览器可视区
sticky	否(占有位置)	浏览器可视区

定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况.

可以使用z-index来控制盒子的前后次序 z轴

数值可为正/负/0(无单位) 默认auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
只有定位盒子才有z-index属性

实践

效果展示

代码展示

无z-index时

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光头强</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

有z-index时

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
        /* 层级排上 */
        z-index: 1;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光头强</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

定位拓展

1.绝对定位的盒子居中?

加了绝对定位的盒子不能通过margin:0 auto水平居中,但是通过计算实现水平和垂直居中

left:50% 让盒子的左侧移动到父级元素的中心位置
margin-left:-1/2*元素宽度让盒子向左移动自身宽度的一半

2.定位特殊特性

行内元素添加绝对或者固定定位,可以直接设置高度和宽度
块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小

3.脱标的盒子不会触发外边距塌陷

浮动元素,绝对定位(固定定位) 元素的都不会触发外边距合并的问题.

外边距塌陷:两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也有上外边距的时候。两个上外边距会合成一个上外边距，以相对较大的上外边距值为准(下边距一样)。左右边距不会出现这种问题。

4.绝对定位(固定定位)会完全压住盒子

绝对定位(固定定位)会压住下面标准流所有的内容[包括文字浮动不会压住文字]

上一篇：图解 CSS Grid 布局
下一篇：伪元素的妙用2 - 多列均匀布局及title属性效果

网站首页 > 技术文章 正文

CSS-定位

为什么需要定位?

定位组成

相对定位 relative

绝对定位 absolute

子绝父相

固定定位 fixed

?粘性定位 sticky

定位小总结?

定位叠放次序 z-index

定位拓展

猜你喜欢

网站首页 > 技术文章正文