css-绝对定位
2013-11-02 23:15
351 查看
1.fixed 与 absolute 类似,只不多fixed参照点只会是<body>,而绝对定位参照点是离该元素最近的非标准流父类元素
2.默认定位方式为:static 。这种定位,left,top等属性不起作用
2.默认定位方式为:static 。这种定位,left,top等属性不起作用
<!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>css-绝对定位</title> <style> .div1,.div2{ background-color:#003399; height:100px; width:100px; margin-top;15px; margin-left:15px; margin-bottom:10px; float:left; } .div2{ position:relative;/*相对定位,相对原本该在的位置,原来位置保留*/ left:30px;/*在原来的位置向右移动*/ top:30px;/*在原位置向下移动*/ } /* 流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式 标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现 非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列 */ #special1,#special2{ position:absolute;/*绝对定位:参照点是离该元素最近的非标准流父类元素*/ left:30px;/*相对参照点向右移动*/ top:30px;/*相对参照点在向下移动*/ display:inline } </style> </head> <div class="div1">hehe1</div> <div class="div1" id="special1">hehe2</div> <div class="div1">hehe3</div> <div class="div1">hehe4</div> <div class="div1">hehe5</div> <div class="div2">hehe6<div class="div1" id="special2">hehe7</div></div> <body> </body> </html>
相关文章推荐
- CSS 盒子模型,绝对定位和相对定位
- CSS 相对|绝对(relative/absolute)定位系列(二)
- div+Css绝对定位(absolute)和相对定位(relative)的总结
- html 相对定位 绝对 定位 css + div
- CSS网页中的相对定位与绝对定位
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- 用CSS实现定位DIV绝对位于网页底部
- css中绝对定位和相对定位的理解
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
- CSS三种定位机制:普通流、浮动和绝对定位
- CSS教程:position 绝对定位的问题
- CSS position绝对定位absolute relative
- CSS 相对/绝对(relative/absolute)定位系列(三)
- Div+CSS教程----DivCSS布局绝对定位和浮动
- css position 绝对定位和相对定位
- div+css基础——7.采用div定位技术对div进行排版(绝对定位,指定父容器)
- CSS 相对/绝对(relative/absolute)定位系列(四)
- CSS网页绝对定位和相对定位
- css基础 绝对定位 position:absolute 相对于document元素进行定位 (无定位的祖先元素)