CSS定位样式

来源：互联网发布：卡巴斯基知乎编辑：程序博客网时间：2024/06/17 01:31

使用定位样式可以控制元素的位置，常用的定位方式包括3种定位方式，一种是static定位方式，即默认定位方式，一种是relative定位方式，即相对定位方式和最后一种为absolute定位方式，即绝对定位方式。

1.定位样式position

定位样式position的语法：

position:取值

其中，取值有3个：
默认值：static
相对定位：relative
绝对定位：absolute

默认定位static

采用默认定位时，一般可以不用设置position样式即可。例子：

    <!doctype html>    <html>    <head>    <title>定位样式</title>    <meta charset="utf-8">    <style>    .par{width:300px;height:300px;border:1px solid red;background-color:red;}    .sub1{width:100px;height:100px;border:1px solid red;background-color:green;}    .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}    </style>    </head>    <body>    <div class="par">    <div class="sub1">sub1</div>    <div class="sub2">sub2</div>    </div>    </body>    </html>

效果：
《HTML+CSS+JS 网页制作》- 定位样式

注意：按照默认定位时，各个元素是按照文档流的形式向下往下排，同时保证块状元素独占一行的原则。

相对定位relative

生成相对定位的元素，相对于其正常位置进行定位，同时配合top, bottom, left和right样式完成定位，例如：

    <!doctype html>    <html>    <head>    <title>定位样式</title>    <meta charset="utf-8">    <style>    .par{width:300px;height:300px;border:1px solid red;background-color:red;}    .sub1{position:relative;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}    .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}    </style>    </head>    <body>    <div class="par">    <div class="sub1">sub1</div>    <div class="sub2">sub2</div>    </div>    </body>    </html>

效果：
《HTML+CSS+JS 网页制作》- 定位样式

注意：此时class值为sub1的定位样式为relative，它的定位没有影响sub2的定位，即sub2还是在原来的位置，但是sub1元素则是相对于它为默认定位方式时的位置，向下移动10px，同时向右移动10px。

绝对定位absolute

对于绝对定位的元素，则需要分其的父元素及以上元素的定位情况来说：
如果其父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位。
如果不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。

例如（不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位）：

    <!doctype html>    <html>    <head>    <title>定位样式</title>    <meta charset="utf-8">    <style>    .par{margin-top:40px;width:300px;height:300px;border:1px solid red;background-color:red;}    .sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}    .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}    </style>    </head>    <body>    <div class="par">    <div class="sub1">sub1</div>    <div class="sub2">sub2</div>    </div>    </body>    </html>

效果：
《HTML+CSS+JS 网页制作》- 定位样式

注意：对于sub1元素设置了绝对定位，但是其父元素没有设置定位方式，则其就相对于浏览器定位，即相当于浏览器，向下称移动10px，向右移动10px，同时需要注意，由于sub1是绝对定位，则其会脱离文档流，则其下面的sub2元素的位置就向上移动了。

例如（父元素中有设置了Position属性，并且属性值为 absolute 或 relative的时候，那么子元素相对于该父元素来进行定位）：

    <!doctype html>    <html>    <head>    <title>定位样式</title>    <meta charset="utf-8">    <style>    .par{position:relative;top:40px;width:300px;height:300px;border:1px solid red;background-color:red;}    .sub1{position:absolute;left:10px;top:10px;width:100px;height:100px;border:1px solid red;background-color:green;}    .sub2{width:100px;height:100px;border:1px solid blue;background-color:blue;}    </style>    </head>    <body>    <div class="par">    <div class="sub1">sub1</div>    <div class="sub2">sub2</div>    </div>    </body>    </html>

效果：
《HTML+CSS+JS 网页制作》- 定位样式

注意：由于sub1元素的父元素par设置position并且设置为relative，所以sub1元素绝对定位是相对于其父元素来说，向下移动10px，向右移动10px，同时需要注意，由于sub1是绝对定位，则其会脱离文档流，则其下面的sub2元素的位置就向上移动了。

原文地址：http://www.tongtongxue.com/archives/10015.html?ref=myread

阅读全文

1 0