WEB前端学习（7）CSS复习六（布局-定位）

最新推荐文章于 2024-07-16 17:16:30 发布

Puppy_CQ

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量210

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/Puppy_CQ/article/details/124453151

版权

1. 为什么需要定位？

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

2. 定位组成

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移。

定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1. 静态定位

1. 静态定位是元素的默认定位方式，无定位的意思。

静态定位按照标准流特性摆放位置，它没有边偏移。静态定位在布局时很少用到

选择器 { position: static; }

2. 相对定位 relative（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

相对定位的特点：（务必记住）
1.它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

3. 绝对定位 absolute（重要）

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

绝对定位的特点：（务必记住）
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

<title>绝对定位-无父亲或者父亲无定位</title>
    <style>
        /*  */
        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
        .son {
            position: absolute;
            /* top: 10px;
            left: 10px; */
            /* top: 100px;
            right: 200px; */
            left: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
            <div class="son"></div>
    </div>
   
</body>

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

 <title>绝对定位-父级有定位</title>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: hotpink;
            padding: 50px;
        }
        .father {
            width: 500px;
            height: 500px;
            background-