css定位属性基础笔记

最新推荐文章于 2022-08-18 01:52:10 发布

红豌豆

最新推荐文章于 2022-08-18 01:52:10 发布

阅读量902

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_64353584/article/details/122609109

版权

这篇博客主要介绍了CSS中的定位属性，包括static、relative、absolute和fixed。static为默认定位，relative进行相对定位，absolute根据上一个定位父元素进行绝对定位，而fixed则是相对于浏览器窗口固定定位。文中还涉及到z-index的叠放次序、元素的显示与隐藏以及各种定位的应用场景，如居中布局和浮动转换。

摘要由CSDN通过智能技术生成

定位属性
   static 自动定位默认   静态定位无法通过边偏移属性 top bottom left right 一般用来清除定位
   relative 相对定位相对原文档流进行定位
   absolute 绝对定位相对于上一个已经定位的父元素进行定位
   fixed 固定定位相对于浏览器窗口进行定位

  <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style type="text/css">
                /*定位模式+边偏移=完整定位*/
                div{
                    width: 100px;
                    height: 100px;
                    background-color: darkseagreen;
                    top: 100px; /*边偏移*/
                    left: 100px;
                    position: absolute; /*定位模式：绝对定位*/
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
        </html>

relative相对位置

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style type="text/css">
                div{
                    width: 100px;
                    height: 100px;
                    background-color: deeppink;
                }
                /*相对于自己原来占有的位置，top110px left 110px*/
                div:nth-child(2){ /*伪类选择器*/
                    background-color: purple;
                    position: relative; /*相对定位*/
                    left: 110px;
                    top: 110px;
                }
            </style>
        </head>
        <body>
            <div></div>
            <div>2</div>
            <div></div>
        </body>
        </html>

absolute绝对路径

  <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style type="text/css">
                /*绝对定位模式会完全脱标，不占位置，下边的盒子会自动上提占据该模式下的盒子占有的位置[相对于文档流]*/
                div:first-child{
                    width: 50px;
                    height: 50px;
                    background-color: deeppink;
                    position: absolute; /*绝对定位*/
                    top: 50px;
                    left: 50px;
                }
                div:last-child{
                    width: 100px;
                    height: 100px;
                    background-color: green;
                }
            </style>
        </head>
        <body>
            <div></div>
            <div></div>
        </body>
        </html>

父元素没有定位情况

  <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <style type="text/css">
                .father{
                    width: 300px;
                    height: 300px;
                    background-color: deeppink;
                    margin: 100px;
                }
                /*如果父类没有定位，则子元素定位已浏览器为基准点对齐[0,0]*/
                .son{
                    width: 100px;
                    height: 100px;
                    background-color: purple;
                    position: absolute; /*绝对定位*/
                    top: 15px;
                    left: 15px;
                }
            </style>