(17.03.29)定位,标签层级关系,hover,透明度

2017-10-16  本文已影响0人  张不困_
定位:

    绝对定位:
        position:absolute; top:0; left:0;(俩个值必须都有)
值:数字 百分比
好处:
  1.主要作用:可以让一个元素在网页中的任何一个位置,而且不干扰页面的布局!
  2.可以做一个页面中绝对居中的块
position:absolute; top:50%; left:50%; margin-top:-块的一半; margin-left:-块的一半;
特性:
  1.完全脱离文档流!
  2.行内元素加了定位就会变成块元素
加了定位的这个元素(块元素)在没有固定宽的情况下,默认内容宽高
  3.默认参照物body
定位元素参照物,首先会从最近的父级一级一级找定位父级,找到以后,定位父级就是它的参照物,如果最后没有找到离自己的最近定位父级,默认是body

    相对定位:
        position:relative; top:0;left:0;(后面的俩个值可以不写)
为什么?
因为相对定位主要作用:为了给绝对定位做参照物!
特性:
  1.不脱离文档流
  2.不改变元素类型
  3.参照物:自己


例子:
<div>
<a href="#" class="a1">1</a>
<a href="#" class="a2">2</a>
<a href="#" class="a3">3</a>
<a href="#" class="a4">4</a>
<a href="#" class="a5">5</a>
</div>

***给a标签加了绝对定位,五个a都重叠在一起!

注意:绝对定位后的层级关系

1.在同为定位元素的标签下
2.后写的标签层级高于先写的  

=======================================
全部标签层级关系

普通元素--》浮动--》定位---》z-index:8;

注意:比较层级的时候,优先比较元素类型!

1.在同为定位元素的标签下
2.后写的标签层级高于先写的  
3.定位元素里,子元素永远都比父元素层级高!

display:none; 消失!

display:block; 显示

hover用法:
必须-移入父级操作子级
也可以移入自己操作自己


透明度:

opacity:0.5;--0-1;
filter:alpha(opacity:50);0-100 兼容ie8

注意:
给一个标签添加透明度,它里面所有包的内容也就变透明了!!!!

上一篇下一篇

猜你喜欢

热点阅读