CSS页面布局基础2——定位
2014-10-13 22:51
309 查看
1、四种定位类型:通过position属性指定分别是static(默认值)、relative、absolute、fixed
static(静态定位):表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化
relative(相对定位):将移动元素盒,但是它在文档流中的原始空间会保留下来。
absolute(绝对定位):元素盒彻底从文档流中脱离出来,并相对于其容器块进行定位。因为这些元素从文档流中脱离出来,所以它们不再影响周边元素的布局,并且它们占据的空间不会被保留。
fixed(固定定位):与绝对定位类似,元素从文档流中脱离,但是它们不是相对于容器块定位,而是相对于视口定位。
2、相对定位:(1)声明:position:relative
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于它们在正常文档流中的初始位置进行定位。没有设置偏移属性的,默认被设置为auto。
(4)在文档流中所占据的原始空间被保留。
(3)可能会覆盖其他的元素。
去掉的时候,运行结果为:
加上后的效果为:
3、绝对定位:(1)声明:position:absolute
(2)使用top,right,bottom,left中的一个或者多个偏移属性相对于其容器块的边缘进行定位。没有设置偏移属性的,默认被设置为auto。
(3)偏移值应用于元素盒的外边缘(包含margin值)
(4)绝对定位的元素从文档流中完全脱离出来。该元素在正常文档流中所占据的空间不保留,并且不影响其他元素。
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后(观察固定定位和绝对定位的区别)
:
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后(观察固定定位和绝对定位的区别)
:
相关文章推荐
- CSS页面布局基础1——盒模型
- css页面布局基础盒模型
- 【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容
- CSS页面布局基础3——元素浮动
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
- [置顶] CSS中几种控制页面布局的定位机制(相对定位与绝对定位)
- CSS基础之几种常见的页面布局
- Java Web入门之css页面布局基础知识
- CSS布局定位基础-盒模型和定位机制
- css页面布局基础
- CSS页面布局基础
- CSS基础 - 页面布局
- css页面布局基础
- CSS基础-21CSS定位-浮动的应用,实现瀑布流布局
- css浮动于定位-布局的基础
- 简单理解页面布局之CSS position定位
- CSS页面布局基础
- css页面布局基础
- css页面布局基础
- CSS页面布局基础4——元素可见性、溢出和元素重叠问题