CSS页面布局基础2——定位

来源：互联网发布：软件双开工具编辑：程序博客网时间：2024/05/27 00:50

1、四种定位类型：通过position属性指定分别是static(默认值)、relative、absolute、fixed
static(静态定位)：表示按照正常定位方案，元素盒按照在文档流中出现的顺序依次格式化
relative(相对定位)：将移动元素盒，但是它在文档流中的原始空间会保留下来。
absolute(绝对定位)：元素盒彻底从文档流中脱离出来，并相对于其容器块进行定位。因为这些元素从文档流中脱离出来，所以它们不再影响周边元素的布局，并且它们占据的空间不会被保留。
fixed(固定定位)：与绝对定位类似，元素从文档流中脱离，但是它们不是相对于容器块定位，而是相对于视口定位。
2、相对定位：(1)声明：position：relative
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于它们在正常文档流中的初始位置进行定位。没有设置偏移属性的，默认被设置为auto。
(4)在文档流中所占据的原始空间被保留。
(3)可能会覆盖其他的元素。

<!DOCTYPE html><html><head><title>相对定位</title><meta charset="utf-8" /><style type="text/css">.div1{width: 450px;height: 450px;border:solid;border-color: black;margin:50px;}.div2{width: 400px;height: 400px;border:solid;border-color: red;margin: 10px;}.div3{width: 300px;height: 300px;border:solid;border-color: green;margin: 10px;}.div4{position: relative;left:50px;top:50px;width: 100px;height: 100px;margin:10px;background-color: #fa1;}</style></head><body><div class="div1"><div class="div2"><div class="div3"><div class="div4"></div></div></div></div></body></html>

将上述代码中的

position: relative;left:50px;top:50px;

去掉的时候，运行结果为：

加上后的效果为：

3、绝对定位:(1)声明：position：absolute
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于其容器块的边缘进行定位。没有设置偏移属性的，默认被设置为auto。
(3)偏移值应用于元素盒的外边缘(包含margin值)

(4)绝对定位的元素从文档流中完全脱离出来。该元素在正常文档流中所占据的空间不保留，并且不影响其他元素。

<!DOCTYPE html><html><head><title>相对定位</title><meta charset="utf-8" /><style type="text/css">.div1{width: 450px;height: 450px;border:solid;border-color: black;margin:50px;}.div2{width: 400px;height: 400px;border:solid;border-color: red;margin: 10px;}.div3{width: 300px;height: 300px;border:solid;border-color: green;margin: 10px;position: absolute;<!--绝对定位div3-->}.box1{width: 100px;height: 100px;background-color: #bbb;/*position: relative;top: -79px;left: -89px;*/  <!--相对定位代码-->}.box2{width: 100px;height: 100px;background-color:yellow;<pre name="code" class="html"> <span style="white-space:pre"></span><!--绝对定位代码-->

/*position: absolute;top: 10px;left: 10px;*/}.box3{width: 100px;height: 100px;background-color:#faa;

 <span style="white-space:pre"></span><!--固定定位代码-->

position: fixed;top: 10px;left: 10px;}</style></head><body><div class="div1"><div class="div2"><div class="div3"><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div></div></div></div></body></html>

绝对定位box2前：

绝对定位box2后：

绝对定位div3和box2后：

固定定位box3和绝对定位div3后(观察固定定位和绝对定位的区别)

：

0 0