您的位置：首页 > 其它

position:relative相对定位

2017-05-11 10:23 267 查看

相对定位：占座儿，不脱离文档流。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>相对定位对象会占据原有位置</title>
<style type="text/css">
<!--
body {
margin:0px;
font-size: 9pt;
line-height:12pt;
margin-top: 150px;
margin-left: 150px;
}
.box1 {
background-color: #3CF;
height: 200px;
width: 200px;
}
.box2 {
background-color: #6C6;
height: 100px;
width: 100px;
position: relative;
float: left;
top:-120px;
}
-->
</style>
</head>

<body>
<div class="box1">
<div class="box2"></div>
[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div>
</body>
</html>

position：absolute绝对定位：脱离文档流

相对定位有两个作用：

在保证元素原始占位不变的情况下，偏移元素，这个有很多地方用得到，比如微调元素的位置，还有就是有种居中的实现方式就是利用了这一点；

作为子元素的定位父元素，也就是说，如果某个元素相对定位了，那其下的子孙元素，在没有其他定位元素隔离的情况下，将以这个父元素的包围框为基准做绝对定位。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 相对定位

相关文章推荐

新的分享

章节导航