CSS基础学习10-CSS设置元素的定位

来源：互联网发布：南京软件科技大学编辑：程序博客网时间：2024/04/30 02:29

所有CSS基础学习文档下载地址：http://download.csdn.net/detail/rongrong_love_lc/9663463

十、CSS设置元素的定位    css定位可以将一个元素精确的放在页面上你所指定的地方。联合使用定位和float（浮动），可以创建多种高级而精确的布局。    1.绝对定位：    一个采用绝对定位的元素不获得任何空间。这就意味着：该元素在被定位后不会留下空位。    value:position:absolute； 然后可以通过属性left、right、top、bottom来设定盒子放在哪里。    html文件如下：      <html>          <head>             <title>Color例子</title>             <link rel="stylesheet" type="text/css" href="color.css"/>          </head>          <body>        <p>study测试文本信息study</p>        <h1 id="box1">study测试文本信息1study</h1>        <h2 id="box2">study测试文本信息2study</h2>         </body>      </html>    CSS文件如下:      #box1{position:absolute;            top:50px;            left:50px;        }      #box2 {color:red;                 position:absolute;             top:50px;             left:50px;         }    2.相对位置:        采用相对位置的元素，其位置是相对于它在文档中的原始位置计算而来的。    相对定位是通过将元素从原来的位置向左、向右、向上或者向下移动来定位的。    采用相对定位的元素会获得相应的空间。    value:position:relative;    html文件如下:      <html>         <head>             <title>Color例子</title>             <link rel="stylesheet" type="text/css" href="color.css"/>       </head>       <body>        <p>study测试文本信息study</p>              <h1>study测试文本信息1study</h1>          <h1 id="box1">study测试文本信息1study</h1>          <h2>study测试文本信息2study</h2>             <h2 id="box2">study测试文本信息2study</h2>        </body>      </html>    CSS文件如下:      #box1{position:relative;            top:20px;            left:50px;            color:blue;            }      #box2 {color:red;             position:relative;             top:150px;             left:150px;         }

0 0