WEB前端学习日志第二周 Day6

WEB前端学习日志第二周 Day6

今日总结：经过今天一上午的学习，主要学习了绝对定位和相对定位，包含块的设置，定位元素的层次关系，并且做了两个案例练习。

绝对定位和相对定位

position的属性值：

1: position:static 【静态定位】 (默认值：添加和不设置的效果一样的)
2: position:absolute 【绝对定位】
a: 绝对定位的参照物：已经有定位的父元素为参照物如果父元素都没有定位或者没有父元素，以整个文档为参照物。
b: 绝对定位的特点:不占据空间,脱离布局流

3: position:relative; 【相对定位】
a: 参照物是自身默认的位置
b: 特点：
(1)占据空间的，不破坏布局流。
(2)如果一个元素有相对定位，也支持margin:0 auto;
注：绝对定位position:absolute; 浮动无效， margin:0 auto 左右居中无效。

包含块的设置

包含块的设置：
1：给父元素添加position:relative;目的：让当前父元素形成参照物（包含块）
2：给要做定位的元素添加position:absolute; 移动位置。

定位元素的层次关系

默认情况下：
结构里面后写的元素添加定位，会把前写元素盖住

控制定位元素的层次关系：
z-index:;
属性值：一个数字，数字值越大越靠上层显示。能接收负数。
默认值auto
例如一个div中有一个H3和一个span，两者都已经定位，但却是重叠的，此时将H3属性值中设置 z-index:2;然后将span中的 z-index设置为2，此时span就会显示在H3上层

总结

网页布局：
首选： 浮动 + 盒模型

什么时候用定位：当元素产生层次关系，或者是不规则布局。

相对定位 和 绝对定位的区别：
参照物的区别
是否破坏布局流

包含块的设置：
给父元素添加 position:relative;形成参照物
给要做定位的子元素添加position:absolute;
定位元素的层次关系 z-index

案例1新闻板块儿的层次

如图，文字部分和数字部分不是在一起显示的效果，是有层次关系的，数字显示在文字上方。
代码实现

案例2：导航栏二级菜单的实现

在body里一个大的ul中每个li中嵌套了一个小的ul并且每个li中有一个超链接a.

主要思路为当鼠没有放在一级菜单时，二级菜单会被隐藏，而当鼠标放置到一级菜单上面后，二级菜单就会显示出来。