定位总结

最新推荐文章于 2022-08-15 20:15:43 发布

原创最新推荐文章于 2022-08-15 20:15:43 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位总结</title>
    <style type="text/css">

    .box1{width: 500px;height: 300px;background: red;border: 1px solid red;}
    .box2{margin: 30px; width: 300px;height: 200px;background: blue;position: relative;}
    .box3{width:100px; height: 100px;background: green;position: absolute;top: 0;left: 0;}
    .box4{width: 200px;height: 200px;background: yellow;position: fixed;right: 0;bottom: 0;line-height: 200px;text-align: center;}
    /* 
    相对定位 position:relative;

    1.不影响元素本身的特性
    2.不使元素脱离文档流
    3.如果没有定位偏移量，对元素本身没有任何影响
    4.定位元素位置控制
        top/right/bottom/left  定位元素偏移量


    绝对定位 position:absolute;

    1.使元素完全脱离文档流
    2.使内嵌支持宽高
    3.块属性标签内容撑开宽度
    4.绝对定位元素的参照物是：离它最近的且设置了position值为absolute/relative/fixed之一的先祖元素，如果没有这样的         
                              先祖元素作为参照物，其默认参照物为文档（即浏览器的可视区域）
    5.相对定位一般都是配合绝对定位使用


    固定定位 position:fixed； 

    与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；

    问题：IE6不支持固定定位；
    */

    </style>
</head>
<body>
    <div class="box1">

        <div class="box2">

            <div class="box3">box3</div>

        </div>

    </div>

    <div class="box4">固定定位</div>


</body>