CSS学习-DAY03-定位

最新推荐文章于 2024-04-03 09:47:29 发布

尘727

最新推荐文章于 2024-04-03 09:47:29 发布

阅读量1k

点赞数 1

文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_63014909/article/details/125783916

版权

定位

1.前提-文档流

流式布局：

元素依次从左到右（行元素、行内块元素）从上到下（块元素）的方式进行排列

文档流:

一个元素内部的子元素采用流式布局时，这个元素内部就会形成一个文档流，每个子元素在文档流中都有自己的位置。

一个元素如果脱离文档流，就不在参与流式布局，父元素中不在有其位置。

块元素脱离文档流之后，宽度不在默认为父元素的100%，需要主动设置宽度。

html中定位默认是static静态定位，采用的就是流式布局。

2.绝对定位

未进行绝对定位：

进行了绝对定位：

1.元素设置了绝对定位后，会脱离文档流，位置会被正常文档流中的内容替代。

2.元素使用绝对定位后，会从页面的左上角出发。

3.在嵌套中，后代元素会先对外层有定位（不能是默认值静态定位）的元素的左上角出发，如果都没用定位，则相对页面的左上角出发。（图片均为position: absolute; top: 100px;left: 100px；）

父级等未定位，绝对定位的起点是页面左上角。

父级等定位，绝对定位的起点是最近一级定位元素左上角开始定位。

4.给元素添加绝对定位后，会转换为行内块元素。

未定位：

定位后：明显，定位后该span元素可以添加宽高，此时已经变成行内块元素。

3.相对定位

未进行定位：

进行相对定位：

1.元素设置了相对定位后，不会脱离文档流。

2.元素使用相对定位后，会从原本位置出发，还占据原本的位置。

父相子绝

3.子绝父相：子元素使用绝对定位。父元素使用相对定位

位置从父元素的左上角出发。

（由于需要子元素相对于父元素内位置进行定位，所以给父元素添加一个非static的定位，这样可以更容易将子元素定位到父元素的正确位置。同时在不能将父元素脱离文档流，因此给父元素相对定位最为合适。用例：课程推荐时的hot、热门推荐等。）

4.行内元素使用相对元素后不会转换为行内块，因此设置的宽高无法生效。

4.固定定位

position: fixed;

1.元素设置了固对定位后，会脱离文档流，原本位置被正常文档流中元素所替代。

2.元素使用固定定位后，会从当前页面的左上角出发，注意，固定定位是随着可视页面一直移动的，当有滚轮向下时，也会跟随移动。

3.在嵌套中不管外层元素是否有定位，元素只要使用固定定位，位置永远从页面的左上角出发。

4.给元素添加固定定位后，会转换为行内块元素。

效果与绝对定位很类似，主要区别在于会随着滚动始终在可视页面中，并且，无论固定定位是否有嵌套，他都是从可视页面的左上角定位。

用例：常用于随着滚动始终保持顶部的导航栏，跟随滚动的侧边栏、广告等。

练习用例：

练习思路：

小盒子定位时根据大盒子进行定位，所以建议使用子绝父相。

1.大盒子使用相对定位，未脱离文档流。需要居中，所以使用margin：0 auto;

2.小盒子使用绝对定位，起点是大盒子左上角（大盒子有非static的定位），其中中间小盒子需要在大盒子中全局居中（代码中.div3选择器内容）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1-定位</title>
    <style>
        div{
            width: 30px;
            height: 30px;
            background-color: red;
            position: absolute;
        }
        .box{
            width: 150px;
            height: 150px;
            background-color: yellow;
            margin: 0 auto;
            position: relative;
        }
        .div2{
            left: 120px;
        }
        .div3{
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
        }
        .div4{
            top: 120px;
        }
        .div5{
            left: 120px;
            top: 120px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </div>
</body>
</html>