position讲解
Posted yangzhiqiang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position讲解相关的知识,希望对你有一定的参考价值。
Position(位置)
只要使用定位,必须要有一个相对的参照物。relative
具体定位的那个元素需要加position:absolute;(绝对的)。绝对的 :就是具体到某一个地方了,特别详细的意思。
使用绝对定位的时候,浏览器会逐层向上级元素找position属性,如果父级没有就会继续向上级查找position,一直到找到position为止,如果找不到就以body为相对位置。
页面布局
1.结构层:搭我们的页面框架。
2.布局层:针对框架内部结构进行排版。
不需要使用浮动解决的问题尽量不用。
使用浮动之后会使该元素脱标
div 盒子模型:
div标签就是一个容器,可以装任何标签。
1. 盒子实际占用的空间
2. 盒子的实际宽高和高度
3. 如何理解盒子模型
Position细说
Position:relative;
Left:100px;
Top:100px;
Position:absolute;
Left:100px;
Top:100px;
Position:relative;如果设置值了,相对原来的位置进行调整
二者区别
1. absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占有着原来的位置。
2. Relative存在”形影分离”,所以一般情况下不建议添加值了,一般给子元素当参照位置,或者是元素的微调。
3. Absolute 会有一种现象”压盖”效果。
Z-index层次关系,可以改变元素的层叠位置,所有的标签默认是0, z-index的值越大,该元素就在上方。
备注:以后我们做定位的时候,尽量保持”子绝父相”。
Fixed 固定定位
Position:fixed;
脱离标准流的属性有哪些:float position:absolute position:fixed.
Position:static;静态
以上是关于position讲解的主要内容,如果未能解决你的问题,请参考以下文章