定位

1.绝对定位(absolute)

a.若没有父元素，参照物为整个文档。

b.默认情况下参照物为已经做定位的父元素。

c.添加绝对定位的元素，会脱离整个布局流，破坏布局空间。

2.相对定位(relative)

a.参照物为自身的默认位置。

b.占据空间。

c.不会占据布局流。

3.固定定位(fixed)

a.参照物为浏览器窗口。

4.粘性定位

a.是relative和fixed的结合。

b.当页面没有触发滚动条的时候，执行的效果是position:relative，反之执行的是position:fixed。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        body{
            height: 10000px;
        }
    div{
        width: 100px;
        height: 100px;
    }
    #guDing{
        background: lightgreen;
        position: fixed;
        left: 500px;
        top: 200px;
    }
    #xiangDui{
        background: lightcoral;
        position: relative;
        /*相对定位不会脱离原本的文档流*/
        left: 100px;
        top: 100px;
    }
    #jueDui{
        background: lightblue;
        position: absolute;
        left: 100px;
        top: 100px;
    }
</style>
</head>
<body>
    <div id="guDing"></div>
    <div id="xiangDui"></div>
    <div id="jueDui"></div>
<!-- 定位三种:
固定定位:相对于浏览器
相对定位:相对于原本的位置，依就会占据原本的空间
绝对定位:相对于离它最近的已定位父级定位
-->
</body>
</html>

 

posted on 2021-11-13 20:28  无心情泡面  阅读(89)  评论(0)    收藏  举报