如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之CSS样式中利用position进行元素的绝对定位和相对定位

网站建设之CSS样式中利用position进行元素的绝对定位和相对定位

时间:2017/8/29 20:40:48 标签:

CSS除了使用float定位元素,还有另外一个更加方便的定位方法,利用position来设置样式,通常情况使用较多的有两种,绝对定位和相对定位。

1)绝对定位,position:absolute,需要top、bottom、left、right配合布局;绝对定位是相对于浏览器的左上角来计算的;
2)相对定位,position:relative,需要top、bottom、left、right配合布局;相对定位是相对于父级元素(块)的左上角来计算的,会跟随父级元素位置的改变二改变,其实从字面也可以理解,这就是相对的意思。

通过案例可以更加深刻的理解这两种定位方法,完整测试代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.test{
height:500px;
width:500px;
background-color:#CCCCCC;
border:1px solid #FF0000;
margin:100px;}
.testone{
height:150px;
width:150px;
background-color:#FF0000;
position:absolute;
top:50px;
left:50px;}

</style>
</head>

<body>
<div class="test">
  <div class="testone">0513web DEMO ONE position test</div>
</div>
</body>
</html>
  
从显示结果可以清晰的看到效果,红色div块的定位是相对于浏览器的整个网页来计算的,跟它的上一层元素没有关系,接下来我们再对照另外一个定位方式进一步学习,相对定位法,测试代码唯一修改的地方是position的值,由absolute变为relative,代码这里不重复了,直接看显示结果:
  

上一篇:网站建设之CSS样式中的盒子模型以及其四个属性应用
下一篇:没有资料