css
盒子模型
之定位
1、static定位
HTML元素
的默认值,即没有定位,元素出现在正常的流中。
静态
定位的元素不会受到
top
,
bottom
,
left
,
right
影响。
2、Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
3、Relative 定位
相对定位元素的定位是相对其正常位置。
立即学习
“
前端免费学习笔记(深入)
”;
可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。
相对定位元素经常被用来作为
绝对定位
元素的容器块。
4、Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
Absolutely定位使元素的位置与文档流无关,因此不占据空间。
Absolutely定位的元素和其他元素重叠。
重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的
盒子模型
0元素
盒子模型
1
盒子模型
2指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。
相对与绝对定位的区别
绝对定位(absolute):
1、将被赋予此定位方法的
盒子模型
3从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据 body 对象左上角作为参考进行定位。
2、绝对定位对象可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的
盒子模型
4,大的在最上面,可以有负值。
相对于最近的非标准流定位,原来的位置消失,被后边的位置所顶替
相对定位(relative):
相对于原来的位置,但是原来的位置仍然保留。
对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。
同样可以用z-index分层设计。
[教程] 彻底弄懂CSS盒子模式四(绝对定位和相对定位)
示例:
效果图:
