CSS-定位布局

最新推荐文章于 2024-08-14 11:57:27 发布

夜丶光

最新推荐文章于 2024-08-14 11:57:27 发布

阅读量293

点赞数

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

本文链接：https://blog.csdn.net/lcconsider/article/details/60954129

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS在默认的条件下，是按照正常文档流的排列，即为块元素占一行，内联元素依次排列；使用浮动布局（float）可以使布局变得非常灵活，但是不容易掌控，定位布局则可以随心所欲的排列。

布局方式

固定定位：fixed
说明：相对于浏览器的排列，四边的距离都是相对于浏览器而言，无论是否拖动滚条，所处的位置始终不改变。
相对定位：relative
说明：相对于改元素当前的位置。
绝对定位：absolute
说明：若是父容器没有特殊布局，那么同固定定位；若是父容器已设置为相对定位，那么边距就是到达父容器边界的距离。
静态定位：static

语法：
position：布局方式（例：fixed）
top：
right：
bottom：
left：

实例

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            * {margin:0;}/*外边距清零*/
            #p_1 {
                position:fixed;
                left:200px;
                background-color:red;
            }
            #p_2 {
                position:absolute;/*段落2父元素无特殊布局*/
                top:50px;
                left:60px;
                background-color:green;
            }
            div {
                position:relative;/*段落3父元素相对定位*/
                width:300px;
                height:300px;
                background-color:gray;
                margin:0 auto;/*水平居中*/
            }
            #p_3 {
                position:absolute;
                top:50px;
                left:60px;
                background-color:blue;
            }
            #p_4 {
                background-color:yellow;
            }
            #p_5 {
                position:relative;/*按照正常文档流，段落5应当紧随段落4的下方，但在此处设置了相对布局*/
                background-color:black;
                top:90px;
                left:60px;
                color:white;
            }
        </style>
    </head>
    <body>
        <p id="p_1">段落1</p>
        <p id="p_2">段落2</p>
        <div>
            <p id="p_3">段落3</p>
        </div>
        <p id="p_4">段落4</p>
        <p id="p_5">段落5</p>
    </body>
</html>