css定位案例探讨（position属性详解）_html/css

css定位案例探讨（position属性详解）_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:33:53

原创

1213人浏览过

简述

定位问题一直是新手学习css的一个难点，现在我将他们总结出来，希望对大家有帮助

position详解

在css中，通过position属性，配合top,right,left,buttom对元素进行定位
position属性有：static，relative，absolute，fixed四种，下面分别探讨

默认定位static

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>    </head>    <style type="text/css">        .container {            width: 400px;            height: 400px;            background-color: #DDDDDD;        }        .container div {            border: 1px solid #F5F5F5;            width: 100px;            height: 100px;            background-color: #06A7E1;        }    </style>    <body>        <div class="container">            <div class="x1">一</div>            <div class="x2">二</div>            <div class="x3">三</div>        </div>    </body></html>

登录后复制

效果：

盒子一行一个，自动换行

相对定位relative

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>    </head>    <style type="text/css">        .container {            width: 400px;            height: 400px;            background-color: #DDDDDD;        }        .container div {            border: 1px solid #F5F5F5;            width: 100px;            height: 100px;            background-color: #06A7E1;        }        .x1{            position: relative;            top: 5px;            left: 5px;        }    </style>    <body>        <div class="container">            <div class="x1">一</div>            <div class="x2">二</div>            <div class="x3">三</div>        </div>    </body></html>

登录后复制

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

立即学习“前端免费学习笔记（深入）”；

绝对定位absolute

<!doctype html><html lang="en">    <head>        <meta charset="UTF-8" />        <title>Document</title>    </head>    <style type="text/css">        .container {            width: 400px;            height: 400px;            background-color: #DDDDDD;            position: relative;        }        .container div {            border: 1px solid #F5F5F5;            width: 100px;            height: 100px;            background-color: #06A7E1;        }        .x1{            position: absolute;            top: 50px;            left: 50px;        }    </style>    <body>        <div class="container">            <div class="x1">一</div>            <div class="x2">二</div>            <div class="x3">三</div>        </div>    </body></html>

登录后复制