css--position - 爱码网

CSS 定位

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

relative

相对定位

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。buttom如果为正数，则向上移动，right如果为正数，则向左移动

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            h2.pos_left
            {
            position:relative;
            left:-20px
            }
            h2.pos_right
            {
            position:relative;
                right:20px;
            }
            .pos_top{position: relative;
                bottom: 40px;
            }
        </style>
    </head>

    <body>
        <h2>这是位于正常位置的标题</h2>
        <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
        <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
        <h2 class="pos_top">这个标题</h2>
        <h2 class="pos_bottom">这个标题</h2>

    </body>

</html>

absolute

absolute绝对定位，相对于当前窗口的位置，有top，left，right，bottom

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            .d1{width: 100px;height: 100px;background: red;
                position:absolute;
                left: 20px;
                top: 20px;
            }
        </style>
    </head>

    <body>
        <div class="d1"></div>

    </body>

</html>

点我