盒式布局---相对定位绝对定位
Posted 永远前进在路上
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒式布局---相对定位绝对定位相关的知识，希望对你有一定的参考价值。
CSS盒模型是CSS可视化格式化系统的基石，它规定每个元素（不管是块级还是内嵌元素）都会产生一个矩形盒子围绕在元素内容之外，这个盒子我们称为元素盒。
盒模型属性包括border（边框）、margin（外边距）、padding（内边距）、width（元素宽度）、height（元素高度），这些属性可以使用快捷方式表示，顺序为上右下左(顺时针)，值之间用空格隔开。设置元素浮动可以使用float属性，其取值分别为none、left（向左浮动）、right（向右浮动）。当元素浮动时，它将会脱离文档流，如果要消除浮动，我们可以用clear来清除浮动影响。元素的postion定位分为static（静态定位）、relative（相对的）、absolute（决对的）、fixed（固定的）。
绝对定位（absolute）：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循html定位规则的，则依据 body 对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在最上面，可以有负值。
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
## 绝对定位 ##
<head>
<title>给定位对象指定一个方位数值</title>
<style type="text/css">
.box1 {
background-color: #33CCFF;
height: 200px;
width: 200px; <!--设置postion和不设置的区别-->
}
.box2 {
background-color: #66CC66;
height: 100px;
width: 100px;
position: absolute;
top: 0px;<!--表示距离顶部0px，如果没有指定一个方位定位属性和值,绝对定位不起作用-->
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
## div块的堆叠 ##
<head>
<title></title>
<style type="text/css">
.box1 {
background-color: #33CCFF;
height: 200px;
width: 200px;
position: absolute;
}
.box2 {
background-color: #66CC66;
height: 100px;
width: 100px;
position: absolute;
}
.box3 {
background-color: red;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
## 相对定位的实验 ##
<head>
<title>相对定位对象会占据原有位置</title>
<style type="text/css">
.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>
以上是关于盒式布局---相对定位绝对定位的主要内容，如果未能解决你的问题，请参考以下文章
网站布局之------浮动(float)和定位(position)(绝对定位，相对定位，静态固定定位)，***什么叫脱离文档流？
css 笔记：前端开发中的“居中”，绝对定位，transform和flex布局：相对绝对定位 - 1